/* ==========================================================================
   Apple design layer (2026-09-28)
   Loaded LAST in <head> on every public page, after each page's own <style>.
   Three pages (engine/connectors, engine/workflows, privacy) keep a <style>
   block inside <body>, which loads later still, so rules those pages also
   set carry an `html body` prefix. !important is used only against rules
   that already use it (portfolio-fixes.css, inline style="" attributes) or
   against page backgrounds that differ per page.

   System: Apple's dark "Pro" pages. True black canvas, #161617 tiles, the
   system font (SF Pro on Apple devices), #f5f5f7 / #a1a1a6 / #86868b text,
   #2997ff links, #0071e3 pill buttons, a translucent global nav, no
   ornamental motion. Palette and type declarations were converted at the
   source by scripts/apple-remodel.py; this file carries the structure.
   The home photo is never filtered, cropped or recoloured here.
   ========================================================================== */

:root{
  --sf:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --a-bg:#000;
  --a-tile:#161617;
  --a-tile-2:#1d1d1f;
  --a-text:#f5f5f7;
  --a-text-2:#a1a1a6;
  --a-text-3:#86868b;
  --a-link:#2997ff;
  --a-btn:#0071e3;
  --a-btn-hover:#0077ed;
  --a-green:#30d158;
  --a-red:#ff6961;
  --a-hair:rgba(255,255,255,.1);
  --a-hair-strong:rgba(255,255,255,.16);
  --a-field-edge:#6e6e73;             /* 3:1+ against tile and field (WCAG 1.4.11) */
  --a-ease:cubic-bezier(.25,.1,.25,1);
  --a-ease-out:cubic-bezier(.23,1,.32,1);
  /* the one gradient, used only to set a headline's key word */
  --grad:linear-gradient(90deg,#2997ff 0%,#5e5ce6 52%,#bf5af2 100%);
}

/* ---------- canvas & type ---------- */
html{background:var(--a-bg);scroll-padding-top:64px}   /* focus never lands under the fixed nav */
body{
  background:var(--a-bg)!important;
  color:var(--a-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
}
button,input,textarea,select{font-family:inherit}
b,strong{font-weight:600}
::selection{background:rgba(41,151,255,.35);color:#fff}
h1,h2,h3{font-weight:600;text-wrap:balance}
p{text-wrap:pretty}

/* ---------- restraint: ornament that Apple would not ship ----------
   The painted sky, aurora ribbons, motes, grain, cursor follower, scroll bar
   and the giant footer wordmark are decoration, not content. */
.sky,.art,.aurora,.grain,.noise,.glow,.star,.stroke,.cur,.ring,#prog,.fmark{display:none!important}
.note::after{display:none}

/* ---------- global nav: translucent material, 48px, one alignment ---------- */
#nav,
body > nav:not([class]){
  /* positioning is left exactly as each page had it; only the material changes */
  background:rgba(22,22,23,.8)!important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:0!important;
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
/* the logo sat at x=148 on some pages and x=184 on others; one container for all */
html body #nav .nwrap,html body nav .nav-inner{
  min-height:48px;padding-top:0;padding-bottom:0;align-items:center;
  max-width:1144px;margin-inline:auto;padding-inline:22px;box-sizing:content-box;
}
@media(max-width:760px){html body #nav .nwrap,html body nav .nav-inner{padding-inline:20px}}
nav .nlogo{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--a-text)}
nav .nlogo b{
  background:none!important;color:var(--a-text)!important;
  -webkit-text-fill-color:currentColor!important;font-weight:600;
}
html body #nav .nlinks,html body nav .nav-links{font-size:12px;font-weight:400;letter-spacing:-.01em;color:var(--a-text)}
html body #nav .nlinks a:not(.ncta),html body nav .nav-links a:not(.nav-cta){opacity:.8;color:var(--a-text);transition:opacity .2s var(--a-ease)}
html body #nav .nlinks a:not(.ncta):hover,html body nav .nav-links a:not(.nav-cta):hover,
html body #nav .nlinks a[aria-current="page"],html body nav .nav-links a[aria-current="page"]{opacity:1;color:var(--a-text)}
/* Apple's nav has no underline sweep */
#nav .nlinks a:not(.ncta)::after{display:none}
html body #nav .ncta,html body nav .nav-cta{
  font-size:12px;font-weight:400;letter-spacing:-.01em;
  padding:5px 12px;border-radius:980px;min-height:0;
  background:var(--a-btn)!important;border:0!important;color:#fff!important;
  transition:background .2s var(--a-ease);
}
html body #nav .ncta:hover,html body nav .nav-cta:hover{background:var(--a-btn-hover)!important;color:#fff!important}

/* mobile menu trigger + sheet: same material, larger type */
.nmenu{font-size:12px;font-weight:400;background:rgba(255,255,255,.08);border:0;border-radius:980px;padding:5px 12px;min-height:36px}
.mnav-back{background:rgba(0,0,0,.48)}
.mnav-card{
  background:rgba(22,22,23,.92);border-left:0;
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
}
.mnav-list a{font-size:24px;font-weight:600;letter-spacing:-.01em;border-bottom:0;padding:10px 4px}

/* ---------- section labels: sentence case, quiet ---------- */
.k,.eyebrow,.kicker{
  font-size:clamp(15px,1.4vw,17px)!important;font-weight:600;letter-spacing:-.01em;
  color:var(--a-text-2)!important;text-transform:none;
}
.k i,.eyebrow i,.case .k i{display:none}

/* ---------- headlines ---------- */
h1 em{
  font-style:normal;font-weight:inherit;letter-spacing:inherit;
  /* longhands only: an !important `background` shorthand resets the clip and
     paints a solid bar instead of lettering */
  background-color:transparent!important;
  background-image:var(--grad)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;-webkit-text-fill-color:transparent!important;
  padding-right:0;
}
.stat b{
  background:none!important;color:var(--a-text)!important;
  -webkit-text-fill-color:currentColor!important;font-weight:600;
}

/* ---------- tiles: flat #161617, no hairline, generous radius ----------
   Only the neutral content cards. Tinted cards that carry meaning (the green
   approval panel, the blue callout, the red "before" column) keep their tint.
   Border COLOUR goes transparent rather than the border itself, so no box
   changes size. */
.stat,.note,.fb,.qa>div,.sk,.mcard,.ecard,
.outrow>div,.inv,.beforeafter>div,.modes>div,details.st,
.card,.explain,.detail,.stage{
  background:var(--a-tile)!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
.stat,.note,.fb,.mcard,.ecard,.wcard,.cv{border-radius:22px}
.qa>div,.sk,.outrow>div,.inv,.beforeafter>div,.modes>div,details.st,.card,.explain,.detail{border-radius:18px}
/* details.st clips its content, so the summary's focus ring is drawn inside */
details.st>summary:focus-visible{outline-offset:-4px;border-radius:16px}
/* the three outcome figures become three tiles instead of one ruled panel */
.stats{background:transparent;border:0;border-radius:0;gap:12px;overflow:visible}
/* tile labels read as labels, not links */
.qa b,.qa4 b{color:var(--a-text-3)!important}
/* Apple tiles do not jump on hover */
.wcard:hover,.mcard:hover,.ecard:hover{transform:none!important}
.wcard{border-color:transparent}
.wcard:hover{border-color:var(--a-hair-strong)}
/* a lone last card in the two-column /engine grid spans the row instead of leaving a hole */
.egrid>.ecard:last-child:nth-child(odd){grid-column:1/-1}
/* the small work card matches the height of the big one beside it */
@media(min-width:961px){.wcard.small{aspect-ratio:auto;align-self:stretch}}

/* one green, one red */
.go,.badge-live.open,.wcard:not([data-private]) .go{color:var(--a-green)}
.badge-live.priv,.wcard[data-private] .go{color:var(--a-red)}
.beforeafter .bad h3{color:var(--a-red)}
/* location on the résumé is plain text, not a link */
.cv-where{color:var(--a-text-3)}
.dgzoom{font-size:12px;font-weight:500;letter-spacing:0}

/* feedback form: visible field edges, legible placeholders */
.fb textarea,.fb input{background:#0b0b0c;border-color:var(--a-field-edge);border-radius:12px}
.fb textarea::placeholder,.fb input::placeholder{color:var(--a-text-3)}
.fb textarea:focus,.fb input:focus{border-color:var(--a-link);box-shadow:0 0 0 3px rgba(41,151,255,.25)}
/* The feedback card used to be drawn at 92% opacity, which dimmed the white
   on #0071e3 send button to 4.43:1. Apple tiles are solid, so it is opaque;
   the hint text also takes the secondary grey to stay well above 4.5:1. */
.fbmini .fb{opacity:1}
.fb label span{color:var(--a-text-2)!important}

/* ---------- the home photo's frame (the image itself is untouched) ---------- */
.photo{border-color:transparent;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.photo .cap{background:var(--a-tile);border-top:0}
.photo-wrap::before{opacity:.55}
.about .pic{border-color:transparent}
@media(max-width:760px){.hero{padding-left:20px;padding-right:20px}}

/* ---------- buttons: Apple pills ---------- */
.btn,.copybtn,a.btn,button.btn{
  border-radius:980px;padding:11px 22px;font-size:17px;font-weight:400;letter-spacing:-.022em;line-height:1.18;
  background:transparent;border:1px solid var(--a-link);color:var(--a-link);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  transition:background-color .2s var(--a-ease),color .2s var(--a-ease),transform .1s ease-out;
}
/* hover fills only where a pointer can hover; a tapped pill on a phone stays outlined */
@media(hover:hover) and (pointer:fine){
  .btn:hover,.copybtn:hover{background:var(--a-link);color:#fff;transform:none;box-shadow:none;border-color:var(--a-link)}
  .wcard img{transition:transform .5s var(--a-ease-out)}
}
.btn.grad,a.grad,.btn.primary{
  background:var(--a-btn)!important;color:#fff!important;border:1px solid var(--a-btn)!important;filter:none;
}
.btn.grad:hover,a.grad:hover,.btn.primary:hover{background:var(--a-btn-hover)!important;border-color:var(--a-btn-hover)!important}
/* respond on press, not on release */
.btn:active,.copybtn:active,.mfoot-btn:active,#nav .ncta:active,nav .nav-cta:active{transform:scale(.97);transition-duration:.1s}
.btn .a{display:none}

/* ---------- links ---------- */
/* Links inside running text keep an underline: colour alone is not enough to
   tell them from the grey text around them (axe link-in-text-block). */
.hmeta a,.flagnote a{
  color:var(--a-link);border-bottom:0;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(41,151,255,.55);
}
.hmeta a:hover,.flagnote a:hover{text-decoration-color:currentColor}
.frow a{color:var(--a-link);border-bottom:0;text-decoration:none}
.frow a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- focus: one ring, everywhere ---------- */
:focus-visible{outline:2px solid var(--a-link);outline-offset:3px}

/* ---------- footer: small, grey, quiet ---------- */
footer{background:var(--a-tile)!important;border-top:0!important}
footer .frow{font-size:12px;color:var(--a-text-3)}
/* the privacy line lines up with the footer row above it (its padding is inline) */
.fprivacy{max-width:var(--max,1120px);margin:0 auto;padding:0 28px 18px!important;font-size:12px}
/* the 404 footer sits inside a centred layout; it stays bare text with real tap targets */
footer.page{background:transparent!important}
footer.page a{display:inline-block;padding:5px 6px;min-height:24px;line-height:14px}
/* footers INSIDE connector cards keep their divider (the rule above is for page footers) */
.card>footer{background:transparent!important;border-top:1px solid var(--a-hair)!important}

/* ---------- accessibility preferences (apple-design s14) ---------- */
@media (prefers-reduced-transparency:reduce){
  #nav,body > nav:not([class]),.mnav-card{
    background:#161617!important;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
}
@media (prefers-contrast:more){
  #nav,body > nav:not([class]){background:#000!important;box-shadow:0 1px 0 #fff}
  html body #nav .nlinks a:not(.ncta),html body nav .nav-links a:not(.nav-cta){opacity:1}
  .k,.eyebrow,.kicker{color:var(--a-text)!important}
}
@media (prefers-reduced-motion:reduce){
  .btn,.copybtn,a.btn,button.btn,.mfoot-btn{transition:none}
  .btn:active,.copybtn:active,.mfoot-btn:active{transform:none}
  .wcard img,.eshot img{transition:none}
  .wcard:hover img,.ecard:hover .eshot img{transform:none}
}