/* =========================================================
   Yes, It's an Agency  -  yesitsanagency.com
   Devices as the canvas. A site that is itself an OS.
   ---------------------------------------------------------
   FONT NOTE: Brand body face is "Diatype Variable" (paid).
   Substituted with self-hosted Geist for now.
   TODO[Tyler]: license Diatype, drop woff2 into assets/fonts,
   swap --font below, remove Geist @font-face block.
   ========================================================= */

/* ---------- Geist (self-hosted substitute) ---------- */
@font-face{font-family:"Geist";src:url("../assets/fonts/geist-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../assets/fonts/geist-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../assets/fonts/geist-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../assets/fonts/geist-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../assets/fonts/geist-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --ink:rgba(0,0,0,0.88);
  --ink2:rgba(0,0,0,0.64);  /* secondary text, WCAG AA on the light desktop */
  --ink3:rgba(0,0,0,0.56);  /* quiet text, still AA (>=4.5:1) */
  --hair:rgba(0,0,0,0.09);
  --desktop-a:#edeef1;
  --desktop-b:#e3e4e8;
  --card:#ffffff;
  --grey:#E9E9EB;          /* incoming iMessage bubble */
  --blue1:#0F73E0;         /* iMessage blue, top stop, AA white text (4.6:1) */
  --blue2:#0A5FCC;         /* bottom stop (6.0:1) */
  --radius:20px;
  --bar-h:40px;
  --maxw:1080px;
  --gutter:clamp(18px,4vw,40px);
  --font:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Text","Geist","Helvetica Neue",sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font);
  color:var(--ink);
  background:#ffffff;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.4;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ---------- a11y helpers ---------- */
.visually-hidden,.skip-link{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px;
}
.skip-link:focus{
  position:fixed!important;top:8px;left:8px;width:auto;height:auto;clip:auto;
  background:#111;color:#fff;padding:8px 14px;border-radius:10px;z-index:200;font-size:13px;
}
:focus-visible{outline:2px solid var(--blue2);outline-offset:3px;border-radius:6px}

/* ---------- Reveal (progressive enhancement) ---------- */
.reveal{opacity:1}
html.js .reveal{opacity:0;transform:translateY(20px)}
html.js .reveal.is-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}

/* =========================================================
   1. OS MENU BAR
   ========================================================= */
.menubar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:20px;
  height:var(--bar-h);padding:0 16px;
  background:rgba(255,255,255,0.72);  /* 0.55 fell to 3.8:1 nav-link contrast over dark video frames (WCAG 1.4.3) */
  -webkit-backdrop-filter:saturate(200%) blur(26px);
  backdrop-filter:saturate(200%) blur(26px);
  border-bottom:1px solid var(--hair);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 1px 12px rgba(0,0,0,0.04);
  font-family:var(--sf);
}
/* Solid fallback where backdrop-filter is unsupported, so text stays legible over content */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .menubar{background:rgba(255,255,255,0.93)}
}
.brand{display:inline-flex;align-items:center;height:100%}
/* two stacked marks crossfade; LEFT-anchored so the logo stays pinned to the top-left
   corner (fixed-width slot keeps the appname position stable as the mark width changes) */
.mark-slot{position:relative;display:inline-block;width:84px;height:20px;flex:0 0 auto}
.yes-mark{position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:18px;width:auto;max-width:84px;object-fit:contain;object-position:left center;
  opacity:0;transition:opacity .45s ease}
.yes-mark.is-active{opacity:1}
.appname{font-weight:700;font-size:12.5px;letter-spacing:-0.01em;color:var(--ink);white-space:nowrap}

.menu-links{display:flex;gap:20px;margin-left:4px}
.menu-links a{font-size:13px;color:var(--ink2);transition:color .18s ease}
.menu-links a:hover,.menu-links a:focus-visible{color:var(--ink)}

.status{margin-left:auto;display:flex;align-items:center;gap:13px;font-size:12.5px;color:var(--ink2)}
.deadpan{font-size:12px;color:var(--ink3);font-style:normal;white-space:nowrap}
.sig{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.sig i{width:3px;background:var(--ink2);border-radius:1px}
.sig i:nth-child(1){height:4px}.sig i:nth-child(2){height:6px}.sig i:nth-child(3){height:8px}.sig i:nth-child(4){height:11px}
/* brand "!" in place of the (blurry) wifi glyph */
.bang{font-family:var(--font);font-weight:800;font-size:15px;line-height:1;color:var(--ink2)}
.clock{font-variant-numeric:tabular-nums;min-width:74px;text-align:right}

/* =========================================================
   2. HERO - iMAC
   ========================================================= */
.hero{
  text-align:center;
  padding:clamp(40px,7vw,84px) var(--gutter) 0;
  scroll-margin-top:calc(var(--bar-h) + 12px);
}
/* Hero lockup: rotating "Yes!" + static "It's an Agency.".
   Sized off a DEFINITE height (no aspect-ratio / no percentage-height chain, which
   is fragile cross-browser and can let the <img>s fall back to full natural size).
   The "Yes!" slot is the widest mark's width (ratio ~4.2) so the mark right-anchors
   and "It's an Agency." stays put as the mark style changes. */
.hero-lockup{
  --hh:min(40px, 5.8vw);                 /* definite cap height; never a % chain */
  display:flex; align-items:flex-end; justify-content:center;
  gap:min(14px, 2vw); margin:0 auto;
}
/* max-height (always definite) is the hard cap, so the <img>s can never fall back
   to full natural size regardless of how the browser resolves heights. */
.hero-yes{position:relative; flex:0 0 auto; height:var(--hh); width:calc(var(--hh) * 4.2)}
.hero-mark{position:absolute; right:0; bottom:0; max-height:var(--hh); width:auto; max-width:100%;
  object-fit:contain; object-position:right bottom; opacity:0; transition:opacity .45s ease}
.hero-mark.is-active{opacity:1}
.hero-rest{flex:0 0 auto; max-height:var(--hh); width:auto; max-width:72vw}
/* deadpan punchline as fine print */
.hero-sub{margin-top:10px;font-weight:500;font-size:clamp(9.5px,1.05vw,11.5px);color:var(--ink3);letter-spacing:0.01em}

/* bigger iMac; container blends straight into the page (no card colour/shadow) */
.imac-stage{width:min(1280px,100%);margin:clamp(20px,3vw,36px) auto 0}
.imac-glass{position:relative}
.reel-video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:transparent}

/* =========================================================
   3. PHONE GRID
   ========================================================= */
/* monospaced terminal style, ~50% smaller, sized to sit on one line */
.sec-head{
  text-align:center;max-width:920px;margin:0 auto;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  font-weight:500;letter-spacing:0;line-height:1.35;color:var(--ink);
  font-size:clamp(12px,2vw,22px);
  text-wrap:balance;
}
.grid-sec{padding:clamp(64px,10vw,120px) var(--gutter) 0;scroll-margin-top:var(--bar-h)}
/* phone grid blends into the page too (no card colour/shadow) */
.grid-stage{width:min(1040px,100%);margin:clamp(20px,3vw,36px) auto 0}

/* =========================================================
   4. iMESSAGE - SERVICES
   ========================================================= */
.chat-sec{
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(64px,10vw,120px) var(--gutter) 0;
  scroll-margin-top:var(--bar-h);
}
.kicker{font-family:var(--sf);font-size:11px;font-weight:500;letter-spacing:0.2em;color:var(--ink3);margin:0 0 18px}
.chat-window{
  width:min(440px,100%);border-radius:22px;background:#fff;overflow:hidden;
  box-shadow:0 24px 60px -22px rgba(0,0,0,0.26),0 2px 10px rgba(0,0,0,0.05);
  border:1px solid var(--hair);
}
.chat-head{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:14px 10px 11px;border-bottom:1px solid var(--hair);
  font-family:var(--sf);
  background:rgba(250,250,252,0.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.avatar{width:42px;height:42px;border-radius:50%;background:#111;display:flex;align-items:center;justify-content:center}
.avatar span{color:#fff;font-family:var(--font);font-weight:800;font-size:14px}
.chat-head .name{font-size:12.5px;color:var(--ink);font-weight:600}
.chat-head .imsg{font-size:10px;color:var(--ink3)}
.chat-body{
  padding:16px 14px;height:clamp(420px,52vh,480px);overflow-y:auto;
  display:flex;flex-direction:column;gap:5px;font-family:var(--sf);
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.row{display:flex}
.row.them{justify-content:flex-start}
.row.me{justify-content:flex-end}
.bubble{
  max-width:78%;padding:9px 14px;border-radius:18px;font-size:15px;line-height:1.32;
  opacity:0;transform:translateY(9px) scale(.96);animation:pop .26s forwards;
  word-wrap:break-word;
}
.them .bubble{background:var(--grey);color:#111;border-bottom-left-radius:6px}
.me .bubble{background:linear-gradient(var(--blue1),var(--blue2));color:#fff;border-bottom-right-radius:6px}
.cta-bubble{cursor:pointer;font-weight:600}
.cta-bubble:hover{filter:brightness(1.04)}
.cta-bubble:active{transform:scale(.97)}
.pulse{animation:pulse .5s ease}
.typing{background:var(--grey);padding:12px 15px;border-radius:18px;border-bottom-left-radius:6px;display:inline-flex;gap:4px}
.typing i{width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,0.35);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes pop{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:.9}}
@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
.replay{
  margin-top:18px;font-family:var(--sf);font-size:13px;color:var(--ink);
  border:1px solid rgba(0,0,0,0.16);background:#fff;padding:8px 18px;border-radius:20px;cursor:pointer;
  transition:background .18s ease;
}
.replay:hover{background:#f4f4f6}
.replay:disabled{opacity:.4;cursor:default}

/* =========================================================
   5. WORK - WINDOWS XP LOGO WALL
   ========================================================= */
.work-sec{padding:clamp(64px,10vw,120px) var(--gutter) 0;scroll-margin-top:var(--bar-h)}
.xp-window{
  width:min(900px,100%);margin:clamp(28px,4vw,44px) auto 0;
  border-radius:8px 8px 4px 4px;overflow:hidden;
  box-shadow:0 30px 70px -26px rgba(0,0,0,0.40),0 3px 12px rgba(0,0,0,0.10);
  border:1px solid rgba(0,0,0,0.12);
  font-family:"Trebuchet MS",Verdana,var(--sf);
  transition:box-shadow .35s ease;
}
/* hovering the window lights it up neon green */
.xp-window:hover{
  box-shadow:0 0 0 1px rgba(57,255,20,0.75),0 0 22px rgba(57,255,20,0.6),0 0 64px rgba(57,255,20,0.42),0 30px 70px -26px rgba(0,0,0,0.40);
}
.xp-title{
  display:flex;align-items:center;justify-content:space-between;
  height:30px;padding:0 4px 0 8px;color:#fff;font-weight:700;font-size:13px;
  text-shadow:0 1px 1px rgba(0,0,0,0.45);
  background:linear-gradient(180deg,#3d95ff 0%,#1e6fef 9%,#1257e6 45%,#0c4fe0 80%,#1a64ec 100%);
}
.xp-title-left{display:inline-flex;align-items:center;gap:7px}
.xp-ico{width:15px;height:13px;border-radius:2px;background:linear-gradient(#ffe9a8,#ffcf5e);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15)}
.xp-btns{display:inline-flex;gap:3px}
.xp-b{width:21px;height:21px;border-radius:3px;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#fff;border:1px solid rgba(255,255,255,0.55);
  background:linear-gradient(#5b9dff,#1d63e6)}
.xp-b.close{background:linear-gradient(#f3866b,#d8401b)}
.xp-screen{background:#5a7edc;line-height:0}
.xp-screen img{width:100%;height:auto;display:block}
.xp-taskbar{
  display:flex;align-items:center;justify-content:space-between;height:30px;
  background:linear-gradient(180deg,#3f8af2 0%,#2a6fe0 8%,#245fd8 50%,#2a6fe0 92%,#3f8af2 100%);
  border-top:1px solid #2255c8;
}
.xp-start{
  display:inline-flex;align-items:center;gap:6px;height:26px;margin:2px 0 2px 0;padding:0 16px 0 8px;
  color:#fff;font-style:italic;font-weight:700;font-size:14px;text-shadow:0 1px 1px rgba(0,0,0,0.4);
  border-radius:0 12px 12px 0;
  background:linear-gradient(180deg,#5cc15a 0%,#3fae3c 8%,#329a2f 50%,#2c8f2a 92%,#46b043 100%);
  box-shadow:inset -1px 0 2px rgba(0,0,0,0.25);
}
.xp-flag{width:14px;height:13px;border-radius:2px;
  background:conic-gradient(from 0deg,#f54b4b 0 25%,#3fae3c 0 50%,#3b78e7 0 75%,#f6c544 0 100%);
  transform:perspective(20px) rotateY(-12deg)}
.xp-tray{display:inline-flex;align-items:center;height:100%;padding:0 12px;color:#fff;font-size:12px;
  background:linear-gradient(180deg,#1a8fe0,#1273c8);box-shadow:inset 1px 0 2px rgba(0,0,0,0.25)}
.xp-clock{font-variant-numeric:tabular-nums}

/* =========================================================
   6. ABOUT  -  about.txt + billboards + macOS dialog
   ========================================================= */
.about-sec{max-width:1040px;margin:0 auto;padding:clamp(72px,11vw,130px) var(--gutter) 0;scroll-margin-top:var(--bar-h);text-align:center}
.about-sec .k{font-family:var(--sf);font-size:11px;font-weight:500;letter-spacing:0.22em;color:var(--ink3);margin:0 0 22px;text-align:center}

/* --- about.txt: a plain text file that types itself out --- */
.notes-window{
  max-width:600px;margin:0 auto;text-align:left;
  background:#fff;border:1px solid var(--hair);border-radius:12px;overflow:hidden;
  box-shadow:0 24px 60px -26px rgba(0,0,0,0.26),0 2px 10px rgba(0,0,0,0.05);
}
.notes-bar{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:34px;border-bottom:1px solid var(--hair);
  background:rgba(248,248,250,0.96);font-family:var(--sf);
}
.win-dots{position:absolute;left:12px;display:inline-flex;gap:6px}
.win-dots i{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 0.5px rgba(0,0,0,0.14)}
.d-r{background:#ff5f57}.d-y{background:#febc2e}.d-g{background:#28c840}
.notes-title{font-size:12px;font-weight:500;color:var(--ink3);letter-spacing:0.01em}
.notes-body{padding:clamp(20px,3.4vw,32px) clamp(20px,4vw,40px) clamp(26px,4vw,38px)}
.notes-text{
  white-space:pre-wrap;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  font-size:clamp(13.5px,1.85vw,16px);line-height:1.75;
  color:var(--ink);font-weight:450;letter-spacing:-0.005em;
}
.caret{
  display:inline-block;width:0.55ch;height:1.05em;margin-left:1px;
  transform:translateY(0.18em);background:var(--ink);
  animation:caretblink 1.05s steps(1,end) infinite;
}
@keyframes caretblink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* --- billboards: the body copy, out in the world (hover zooms in within the frame) --- */
.billboard{margin:clamp(26px,4vw,40px) auto 0;max-width:960px;
  border-radius:16px;overflow:hidden;
  box-shadow:0 26px 64px -30px rgba(0,0,0,0.42),0 2px 8px rgba(0,0,0,0.05);
  transition:box-shadow .5s cubic-bezier(.2,.7,.2,1)}
.billboard img{width:100%;height:auto;display:block;border-radius:inherit;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.billboard:hover{box-shadow:0 38px 84px -30px rgba(0,0,0,0.5),0 3px 12px rgba(0,0,0,0.07)}
.billboard:hover img{transform:scale(1.12)}

/* --- macOS credits dialog --- */
.mac-dialog{
  max-width:300px;margin:clamp(34px,5vw,52px) auto 0;padding:22px 22px 18px;
  text-align:center;font-family:var(--sf);
  background:#fafafc;            /* opaque: it sits on solid white, so a backdrop blur was a no-op */
  border:1px solid rgba(0,0,0,0.08);border-radius:16px;
  box-shadow:0 30px 70px -24px rgba(0,0,0,0.40),0 2px 10px rgba(0,0,0,0.06);
}
.mac-dialog-icon{
  width:56px;height:56px;margin:0 auto;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--blue1),var(--blue2));
  box-shadow:0 8px 18px -8px rgba(11,123,255,0.6),inset 0 1px 0 rgba(255,255,255,0.35);
}
.mac-dialog-icon span{color:#fff;font-family:var(--font);font-weight:800;font-size:22px}
.mac-dialog-title{margin-top:14px;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-0.01em}
.mac-dialog-msg{margin-top:7px;font-size:12px;line-height:1.5;color:var(--ink2)}
.mac-dialog-actions{margin-top:18px}
.mac-btn{display:block;width:100%;padding:9px 14px;border-radius:9px;font-size:13.5px;font-weight:600;text-align:center}
.mac-btn.primary{background:linear-gradient(var(--blue1),var(--blue2));color:#fff;box-shadow:0 6px 16px -8px rgba(11,123,255,0.7);transition:filter .18s ease}
.mac-btn.primary:hover{filter:brightness(1.06)}
.mac-btn.primary span{display:inline-block;transition:transform .2s ease}
.mac-btn.primary:hover span{transform:translateX(3px)}

/* =========================================================
   7. CONTACT - iMESSAGE / MAIL PHONE
   ========================================================= */
.contact-sec{
  position:relative;                                   /* the footer overlays the bottom of this closing band */
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(20px,4vw,40px);
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(72px,11vw,130px) var(--gutter) 0;      /* no bottom padding: the hand bleeds to the page edge */
  scroll-margin-top:var(--bar-h);
}
.contact-copy{max-width:380px;justify-self:end;align-self:center;position:relative;z-index:2;
  padding-bottom:clamp(60px,9vh,104px)}                /* keep the copy clear of the overlaid footer */
.contact-head{font-weight:800;letter-spacing:-0.035em;line-height:1;font-size:clamp(34px,5.5vw,60px);color:var(--ink)}
.contact-cta{
  display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  background:linear-gradient(var(--blue1),var(--blue2));color:#fff;font-weight:600;font-size:16px;
  padding:13px 24px;border-radius:30px;
  box-shadow:0 12px 26px -10px rgba(11,123,255,0.6);
  transition:transform .18s ease,box-shadow .18s ease;
}
.contact-cta:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(11,123,255,0.7)}
.contact-cta:active{transform:translateY(0)}
.contact-cta span{transition:transform .2s ease}
.contact-cta:hover span{transform:translateX(4px)}

.contact-phone{position:relative;justify-self:start;align-self:end;width:100%;max-width:480px;z-index:1}
.contact-phone>img{width:100%;height:auto;display:block}
/* clickable send-arrow hotspot (top-right of the phone screen) */
.send-hotspot{
  /* centred on the arrow button in contact-hand.webp: its centre measures
     695/1348 x, 175.5/1619 y, so the 13%-wide square is offset by half its side */
  position:absolute;top:5.43%;left:45.05%;width:13%;aspect-ratio:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.send-ring{
  position:relative;
  width:78%;height:78%;border-radius:50%;
  animation:ringpulse 1.9s ease-in-out infinite;
}
/* outward ping that radiates off the ring */
.send-ring::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:2px solid rgba(11,123,255,0.75);
  animation:ringping 1.9s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes ringpulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 0 0 2px rgba(11,123,255,0.9),
               0 0 12px 3px rgba(11,123,255,0.45),
               inset 0 0 10px rgba(11,123,255,0.25);
  }
  50%{
    transform:scale(1.09);
    box-shadow:0 0 0 3px rgba(11,123,255,1),
               0 0 26px 9px rgba(11,123,255,0.7),
               inset 0 0 16px rgba(11,123,255,0.45);
  }
}
@keyframes ringping{
  0%{transform:scale(1);opacity:.75}
  70%{transform:scale(2);opacity:0}
  100%{transform:scale(2);opacity:0}
}
.send-hotspot:hover .send-ring{
  animation-duration:1.1s;
  box-shadow:0 0 0 3px rgba(11,123,255,1),
             0 0 34px 12px rgba(11,123,255,0.85),
             inset 0 0 18px rgba(11,123,255,0.5);
}
.send-hotspot:hover .send-ring::after{animation-duration:1.1s}

/* =========================================================
   FOOTER
   ========================================================= */
/* overlays the bottom of the contact band, left-justified; the hairline crosses the
   (transparent) hand PNG and the forearm bleeds past it to the page edge */
.footer{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 18px;
  padding:16px var(--gutter);
  text-align:left;
  font-size:13px;color:var(--ink3);
  background:transparent;
}
.foot-mark{font-weight:700;color:var(--ink2)}
.foot-mail{color:var(--ink2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:currentColor}
.foot-mail:hover{color:var(--ink)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* hide the deadpan status line before it gets cramped enough to wrap the bar */
@media (max-width:900px){
  .deadpan{display:none}
  /* the footer text starts overlapping the hand photo at these widths; give it the
     menubar's glass treatment so it stays readable (WCAG 1.4.3). Invisible over white. */
  .footer{background:rgba(255,255,255,0.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}

@media (max-width:760px){
  .contact-sec{grid-template-columns:1fr;text-align:center}
  /* single column: the footer overlays the phone at the page bottom, not this copy
     column, so the desktop footer-clearance padding is pure dead space here */
  .contact-copy{justify-self:center;max-width:none;padding-bottom:0}
  .contact-phone{justify-self:center;max-width:520px;margin:0 auto}
}
@media (max-width:640px){
  :root{--gutter:16px}
  /* keep the nav (wayfinding) but drop the app-name + deadpan to make room */
  .appname{display:none}
  .deadpan{display:none}
  .menubar{gap:12px;padding:0 14px}
  .mark-slot{width:64px}
  .yes-mark{height:15px;max-width:64px}
  .menu-links{gap:13px;margin-left:0}
  .menu-links a{font-size:12px}
  .status{gap:10px}
  .clock{min-width:0}

  /* iMessage goes full-bleed: it reads like the visitor's own Messages app */
  .chat-sec{padding-left:0;padding-right:0}
  .chat-window{
    width:100%;border-radius:0;border-left:0;border-right:0;
    box-shadow:0 -1px 0 var(--hair);
  }
  .chat-body{height:68vh}
  .kicker{padding:0 16px}
}
@media (max-width:430px){
  .sig,.bang{display:none}
  .menu-links{gap:11px}
  .menu-links a{font-size:11.5px}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1!important;transform:none!important}
  .send-ring{animation:none;transform:none;
    box-shadow:0 0 0 2px rgba(11,123,255,0.9),0 0 18px 5px rgba(11,123,255,0.5)}
  .send-ring::after{animation:none;opacity:0}
  .bubble{animation:none;opacity:1;transform:none}
  .typing i{animation:none}
  .billboard img{transition:none}
  .billboard:hover img{transform:none}
  .caret{animation:none}
  *{scroll-behavior:auto!important}
}