/* Self-hosted, latin subset only. These were loaded from fonts.googleapis.com,
   which meant DNS, TLS and two round trips to one third party before a second
   set to fonts.gstatic.com, all of it ahead of first paint. Both families are
   variable fonts, so one file per style covers every weight in use. */
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/fonts/self/dmsans-400.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url('/fonts/self/playfairdisplay-400.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Playfair Display'; font-style:italic; font-weight:400 700; font-display:swap;
  src:url('/fonts/self/playfairdisplay-400-italic.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --ground:#F6F3EC; --ground-2:#EFEAE0; --panel:#FFF;
    --plume:#0F8F88; --plume-lit:#12A69E; --plume-deep:#0A6560;
    /* Button surface: white on --plume is only 3.96:1. This is 5.05:1. */
    --plume-2:#0C7C76;
    --throat:#6D3FD1; --throat-deep:#54299F;
    --ink:#151B1D; --dim:#4F6164; --faint:#5A6C6F;
    --line:rgba(21,27,29,.14); --line-2:rgba(15,143,136,.42);
    --serif:"Playfair Display", Georgia, serif;
    --sans:"DM Sans", system-ui, sans-serif;
  }

/* Images carry width/height attributes so the page stops reflowing as they
   load. Without this they would also honour the height attribute literally
   and distort. More specific rules below still win. */
img { max-width:100%; height:auto; }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  /* clip, not hidden: hidden makes this a scroll container and silently kills
     position:sticky on the identity bar. */
  html { overflow-x:clip; }
  body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans);
         -webkit-font-smoothing:antialiased; overflow-x:clip; }
  .wrap { max-width:1200px; margin:0 auto; padding:0 36px; }
  @media (max-width:700px){ .wrap{ padding:0 18px; } }
  .rule { height:1px; background:var(--line); border:0; margin:0; }


  /* Hero plus the bar occupy exactly one screen; the bar sits on the fold and
     then pins to the top once you scroll past it. */
  :root { --barh:82px; }
  @media (max-width:700px){ :root { --barh:62px; } }
  .screen { min-height:calc(100vh - var(--barh)); min-height:calc(100svh - var(--barh));
            display:flex; flex-direction:column; }
  .screen .cover { flex:1 1 auto; display:flex; }
  .screen .cover__sheet { flex:1 1 auto; display:grid; align-content:center; }
  /* short viewports: shrink the film before the layout starts overflowing */
  @media (max-height:820px){ .laptop { max-width:460px; } }
  @media (max-height:720px){ .laptop { max-width:400px; } .cover__hed { font-size:clamp(1.3rem,2.6vw,2rem); } }
  @media (max-height:640px){ .screen { min-height:0; } }

  /* ============ the cover ============ */
  .cover { padding:0; }
  .cover__sheet {
    position:relative; background:
      radial-gradient(80% 60% at 88% 2%, rgba(18,166,158,.18), transparent 60%),
      radial-gradient(70% 55% at 4% 92%, rgba(109,63,209,.16), transparent 62%),
      var(--ground-2);
    border:0; padding:40px 0 48px; overflow:hidden;
  }
  @media (max-width:700px){ .cover__sheet{ padding:30px 0 36px; } }

  /* masthead */
  .masthead { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .masthead h1 {
    font-family:var(--serif); font-weight:900; margin:0;
    font-size:clamp(2.1rem,7.4vw,5.6rem); line-height:.9; letter-spacing:-.03em; text-transform:uppercase;
  }


  /* thin identity bar, after the hero, then it pins */
  .idbar {
    position:sticky; top:0; z-index:50;
    border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
    background:var(--ground);
  }
  .idbar__inner {
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    gap:34px; padding:14px 36px;
  }
  @media (max-width:700px){ .idbar__inner{ padding:11px 18px; gap:16px; } }
  .idbar__mark { display:block; justify-self:center; line-height:0; }
  .idbar__mark img { height:52px; width:auto; display:block; }
  @media (max-width:700px){ .idbar__mark img{ height:38px; } }
  .idbar__nav { display:flex; align-items:center; gap:30px; }
  .idbar__nav--l { justify-content:flex-end; }
  .idbar__nav--r { justify-content:flex-start; }
  .idbar__nav a { color:var(--dim); text-decoration:none; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; }
  .idbar__nav a:hover { color:var(--plume-deep); }
  @media (max-width:560px){
    .idbar__inner{ gap:10px; padding:10px 14px; }
    .idbar__nav{ gap:12px; }
    .idbar__nav a{ font-size:.54rem; letter-spacing:.1em; }
    .idbar__mark img{ height:30px; }
  }

  .dateline { font-size:.64rem; letter-spacing:.28em; text-transform:uppercase; color:var(--plume-deep);
              margin:0 0 16px; font-weight:500; }
  .masthead__nav { display:flex; align-items:center; gap:26px; flex-wrap:wrap; padding-bottom:10px; }
  .masthead__nav a { color:var(--dim); text-decoration:none; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; }
  .masthead__nav a:hover { color:var(--plume-deep); }
  .masthead__nav a.cta { border:1px solid var(--ink); color:var(--ink); padding:10px 16px; }
  .masthead__nav a.cta:hover { background:var(--ink); color:var(--ground); }
  @media (max-width:760px){ .masthead__nav{ gap:18px; } .masthead__nav a:not(.cta){ display:none; } }
  .masthead .issue { font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--plume-deep); text-align:right; line-height:2; }

  /* cover body: lines left, image centre, lines right */
  .cover__grid { display:grid; grid-template-columns:210px 1fr 210px; gap:34px; align-items:center; padding-top:0; }
  @media (max-width:1040px){
    /* stacked, the DOM puts the side cards above the headline; force the stage up */
    .cover__grid{ display:flex; flex-direction:column; gap:28px; }
    .cover__stage{ order:-1; }
  }

  .coverline { border-top:1px solid var(--line); padding-top:13px; margin-bottom:24px; }
  .coverline b { display:block; font-family:var(--serif); font-weight:700; font-size:1.02rem; line-height:1.25; margin-bottom:6px; }
  .coverline span { font-size:.72rem; color:var(--dim); line-height:1.6; display:block; }
  .coverline i { font-style:normal; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--plume-deep); display:block; margin-bottom:8px; }
  @media (max-width:1040px){ .cover__side{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .coverline{ margin-bottom:0; } }
  @media (max-width:560px){ .cover__side{ grid-template-columns:1fr; } }

  /* the headline sits over the image, like a cover */
  .cover__stage { position:relative; }
  .cover__hed {
    font-family:var(--serif); font-weight:700; font-style:italic;
    font-size:clamp(1.5rem,3.1vw,2.5rem); line-height:1.05; letter-spacing:-.02em;
    margin:0 0 20px; text-align:center;
  }
  .cover__hed em { font-style:normal; background:linear-gradient(96deg,var(--plume),var(--throat));
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .cover__kicker { text-align:center; font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
                   color:var(--plume-deep); font-weight:500; margin:0 0 22px; }

  /* ---- laptop, drawn in CSS ---- */
  .laptop { width:100%; max-width:540px; margin:0 auto; }
  .laptop__lid {
    background:linear-gradient(160deg,#2A3B40,#101F23 46%,#24393E);
    border-radius:14px 14px 4px 4px; padding:12px 12px 16px;
    box-shadow:0 26px 54px rgba(21,27,29,.28), inset 0 0 0 1px rgba(255,255,255,.1);
    position:relative;
  }
  .laptop__cam { position:absolute; top:5px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:#0B1518; }
  .laptop__screen { border-radius:5px; overflow:hidden; background:#000; display:block; position:relative; cursor:pointer; }
  .laptop__screen img { width:100%; display:block; aspect-ratio:16/10; object-fit:cover; object-position:top center; }
  .laptop__screen video { width:100%; display:block; aspect-ratio:16/9; object-fit:contain; background:#000; }
  .laptop__base {
    height:13px; width:114%; margin:0 0 0 -7%; max-width:100vw;
    background:linear-gradient(180deg,#33474D,#16272B 60%,#0D1A1D);
    border-radius:0 0 12px 12px; position:relative;
    box-shadow:0 16px 26px rgba(21,27,29,.24);
  }
  .laptop__base::after { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:14%; height:5px; background:#0B1518; border-radius:0 0 7px 7px; }

  .port__ctl { position:absolute; right:12px; bottom:12px; display:flex; gap:8px; z-index:3; }
  @media (max-width:700px){ .laptop__base{ width:106%; margin-left:-3%; } }
  .port__btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0;
    color:#fff; background:rgba(10,26,28,.6); border:1px solid rgba(255,255,255,.42);
    border-radius:999px; cursor:pointer; line-height:0; backdrop-filter:blur(5px); }
  .port__btn:hover { background:#000; border-color:var(--plume-lit); color:var(--plume-lit); }
  .port__btn svg { width:16px; height:16px; display:block; }
  .is-sounding .port__btn[data-sound] { background:var(--plume); border-color:var(--plume); color:#fff; }

  .cover__cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
  /* inline-block, not inline: an inline button that wraps splits its background
     across two lines, which is what "half a button on the next line" was.
     nowrap keeps the label whole so the pair wraps as two buttons instead. */
  .btn { display:inline-block; white-space:nowrap; text-align:center;
         font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
         text-decoration:none; padding:15px 26px; font-weight:500; }
  .btn-solid { background:var(--plume-2); color:#fff; }
  .btn-solid:hover { background:var(--plume-deep); }
  .btn-out { border:1px solid var(--ink); color:var(--ink); }
  .btn-out:hover { background:var(--ink); color:var(--ground); }

  /* ============ work ============ */
  /* padding-top/bottom only: this element also carries .wrap, and a shorthand
     here wiped out the horizontal padding the whole page relies on. */
  .work { padding-top:76px; padding-bottom:20px; }
  .work__head { display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:6px; }
  .work__head h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,2.6vw,2.1rem); margin:0; }
  .work__head h2 em { font-style:italic; background:linear-gradient(96deg,var(--plume),var(--throat));
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .work__all { font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--plume-deep);
               text-decoration:none; border-bottom:1px solid var(--line-2); padding-bottom:3px; white-space:nowrap; }
  .work__all:hover { color:var(--throat); border-color:var(--throat); }

  .piece { padding:52px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 270px; gap:46px; align-items:center; }
  @media (max-width:960px){ .piece{ grid-template-columns:1fr; gap:28px; } }
  .rig { position:relative; max-width:none; padding-right:118px; }
  .rig--film { padding-right:0; max-width:none; }
  @media (max-width:520px){ .rig{ padding-right:74px; } }
  .rig .laptop { max-width:none; }
  .rig .laptop__lid { padding:9px 9px 12px; border-radius:11px 11px 3px 3px; }
  .phone { position:absolute; right:0; bottom:-6px; width:126px; }
  @media (max-width:520px){ .phone{ width:84px; } }
  .phone__case { position:relative; border-radius:18px; padding:5px;
    background:linear-gradient(150deg,#2E4A50,#132A2E 42%,#22434A);
    box-shadow:0 16px 34px rgba(21,27,29,.3), inset 0 0 0 1px rgba(255,255,255,.14); }
  .phone__screen { border-radius:14px; overflow:hidden; background:#000; display:block; position:relative; }
  .phone__screen img { width:100%; display:block; aspect-ratio:1/2.05; object-fit:cover; object-position:top center; }
  .phone__island { position:absolute; top:5px; left:50%; transform:translateX(-50%); width:34%; height:7px; background:#05100F; border-radius:99px; z-index:2; }

  .piece__idx { font-family:var(--serif); font-style:italic; color:var(--plume-deep); font-size:.95rem; display:block; margin-bottom:8px; }
  .piece__name { font-family:var(--serif); font-weight:500; font-size:1.5rem; display:block; margin-bottom:4px; }
  .piece__tag { font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:16px; }
  .piece__lead { font-family:var(--serif); font-style:italic; font-size:1.05rem; line-height:1.5; margin:0 0 16px; }
  .piece__meta { color:var(--dim); font-size:.86rem; line-height:1.72; margin:0 0 18px; }
  .stat { display:flex; gap:26px; flex-wrap:wrap; margin:0 0 18px; }
  .stat b { font-family:var(--serif); font-size:1.4rem; font-weight:500; display:block; line-height:1;
    background:linear-gradient(96deg,var(--plume),var(--throat)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .stat span { font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); display:block; margin-top:6px; }
  .visit { font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--plume-deep);
           text-decoration:none; border-bottom:1px solid var(--line-2); padding-bottom:3px; }
  .visit:hover { color:var(--throat); border-color:var(--throat); }



  /* ============ showcase: one project at a time ============ */
  .showcase { border-top:1px solid var(--line); padding-top:8px; }
  .showcase__tabs { display:flex; gap:0; flex-wrap:wrap; }
  .showcase__tabs button {
    background:transparent; border:0; border-bottom:2px solid transparent; cursor:pointer;
    font-family:inherit; text-align:left; padding:20px 30px 16px 0; color:var(--faint); transition:color .2s;
  }
  .showcase__tabs button i { font-style:normal; font-family:var(--serif); font-size:.8rem; display:block; margin-bottom:5px; }
  .showcase__tabs button b { font-family:var(--serif); font-weight:500; font-size:1.16rem; display:block; }
  .showcase__tabs button:hover { color:var(--dim); }
  .showcase__tabs button[aria-pressed="true"] { color:var(--ink); border-bottom-color:var(--plume); }
  .showcase__tabs button[aria-pressed="true"] i { color:var(--plume-deep); }

  .showcase__stage { position:relative; padding:44px 0 8px; }
  .slide { display:none; grid-template-columns:minmax(0,1fr) minmax(280px,350px); gap:48px; align-items:center; }
  .slide.is-on { display:grid; animation:slidein .38s cubic-bezier(.4,0,.2,1); }
  @media (max-width:960px){ .slide.is-on{ grid-template-columns:1fr; gap:28px; } }
  @keyframes slidein { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }

  .showcase__nav { display:flex; align-items:center; gap:18px; justify-content:flex-end; padding:8px 0 4px; }
  .showcase__nav button { width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
    background:transparent; color:var(--ink); cursor:pointer; font-size:.95rem; line-height:1; transition:.2s; }
  .showcase__nav button:hover { border-color:var(--plume); color:var(--plume-deep); }
  .showcase__nav span { font-size:.66rem; letter-spacing:.2em; color:var(--faint); }

  /* ============ problem ============ */
  .problem { background:var(--ink); color:var(--ground); padding:86px 0 78px; margin-top:0; }
  .problem__head { max-width:60ch; }
  .problem .kicker { font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--plume-lit); margin:0 0 20px; }
  .problem h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,4vw,3.1rem);
                line-height:1.1; margin:0 0 20px; max-width:19ch; }
  .problem h2 em { font-style:italic; color:#7FD9D2; }
  .problem__head p { color:rgba(246,243,236,.66); line-height:1.75; font-size:1rem; margin:0; max-width:52ch; }
  .symptoms { list-style:none; margin:52px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:0; }
  @media (max-width:820px){ .symptoms{ grid-template-columns:1fr; } }
  .symptoms li { padding:26px 34px 26px 0; border-top:1px solid rgba(246,243,236,.16); display:grid;
                 grid-template-columns:38px 1fr; gap:14px; align-items:start; }
  .symptoms i { font-style:normal; font-family:var(--serif); color:#7FD9D2; font-size:.92rem; padding-top:2px; }
  .symptoms b { display:block; font-family:var(--serif); font-weight:400; font-size:1.16rem; line-height:1.3; margin-bottom:7px; }
  .symptoms span { color:rgba(246,243,236,.6); font-size:.88rem; line-height:1.68; }

  /* ============ solution ============ */
  .solution { padding:80px 0 20px; }
  .solution__head { text-align:center; max-width:56ch; margin:0 auto 12px; }
  .solution .kicker { font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--plume-deep); margin:0 0 18px; }
  .solution h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,3.6vw,2.8rem); line-height:1.12; margin:0 0 18px; }
  .solution h2 em { font-style:italic; background:linear-gradient(96deg,var(--plume),var(--throat));
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .solution__head p { color:var(--dim); line-height:1.75; margin:0; }


  /* problem: headline left, scanner offer in the space on the right */
  .problem__top { display:grid; grid-template-columns:1.25fr .75fr; gap:56px; align-items:start; }
  @media (max-width:900px){ .problem__top{ grid-template-columns:1fr; gap:34px; } }
  .problem__aside { border:1px solid rgba(246,243,236,.22); padding:28px 30px; }
  .problem__aside .kicker { color:#7FD9D2; margin:0 0 12px; }
  .problem__aside p { color:rgba(246,243,236,.68); line-height:1.72; font-size:.92rem; margin:0 0 20px; }
  .problem__aside .btn { display:inline-block; }

  /* ============ the fix: three ways to work ============ */
  .fix { padding:88px 0 96px; }
  .fix__head { max-width:60ch; margin:0 0 52px; }
  .fix .kicker { font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--plume-deep); margin:0 0 18px; }
  .fix h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,3.8vw,3rem); line-height:1.1; margin:0 0 18px; max-width:18ch; }
  .fix h2 em { font-style:italic; background:linear-gradient(96deg,var(--plume),var(--throat));
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .fix__head p { color:var(--dim); line-height:1.75; margin:0; }

  .ways { display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
  @media (max-width:820px){ .ways{ grid-template-columns:1fr; } }
  .way { background:var(--ground); padding:36px 34px 34px; display:flex; flex-direction:column; }
  .way__role { font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--plume-deep); margin:0 0 14px; font-weight:500; }
  .way h3 { font-family:var(--serif); font-weight:400; font-size:1.6rem; margin:0 0 14px; line-height:1.15; }
  .way__body { color:var(--dim); line-height:1.75; font-size:.93rem; margin:0 0 20px; }
  .way__list { list-style:none; margin:0 0 26px; padding:0; }
  .way__list li { color:var(--ink); font-size:.87rem; line-height:1.6; padding:9px 0 9px 22px; position:relative; border-top:1px solid var(--line); }
  .way__list li::before { content:""; position:absolute; left:0; top:17px; width:9px; height:1px; background:var(--plume); }
  .way__cta { margin-top:auto; align-self:flex-start; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
              color:#fff; background:var(--plume-2); text-decoration:none; padding:14px 22px; }
  .way__cta:hover { background:var(--plume-deep); }

  /* ============ dinner ============ */
  .dinner { padding:82px 0; border-top:1px solid var(--line); }
  .dinner__grid { display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
  @media (max-width:900px){ .dinner__grid{ grid-template-columns:1fr; gap:30px; } }
  .dinner .kicker { font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--plume-deep); margin:0 0 18px; }
  .dinner h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,3.6vw,2.8rem); line-height:1.1; margin:0 0 20px; max-width:16ch; }
  .dinner h2 em { font-style:italic; background:linear-gradient(96deg,var(--plume),var(--throat));
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .dinner p { color:var(--dim); line-height:1.75; margin:0 0 14px; max-width:50ch; }
  .dinner__shot { margin:0; }
  .dinner__shot img { width:100%; height:auto; display:block; border:1px solid var(--line);
                      box-shadow:0 22px 50px rgba(21,27,29,.16); }
  .dinner__shot figcaption { font-size:.78rem; color:var(--faint); line-height:1.6; margin-top:14px; max-width:44ch; }
  .dinner__note { border-left:2px solid var(--plume); padding:6px 0 6px 24px; margin-top:28px; }
  .dinner__note p { margin:0; font-size:.92rem; }
  .dinner__note b { color:var(--ink); }

  /* ============ faq ============ */
  .faq { padding:84px 0 90px; border-top:1px solid var(--line); }
  .faq .kicker { font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--plume-deep); margin:0 0 18px; }
  .faq h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,3.6vw,2.8rem); line-height:1.1; margin:0 0 40px; max-width:18ch; }
  .faq h2 em { font-style:italic; background:linear-gradient(96deg,var(--plume),var(--throat));
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .qa { border-top:1px solid var(--line); }
  .qa:last-child { border-bottom:1px solid var(--line); }
  .qa summary { list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
                font-family:var(--serif); font-size:1.14rem; color:var(--ink); }
  .qa summary::-webkit-details-marker { display:none; }
  .qa summary::after { content:"+"; position:absolute; right:6px; top:20px; color:var(--plume-deep); font-family:var(--sans); font-size:1.1rem; }
  .qa[open] summary::after { content:"\2212"; }
  .qa summary:hover { color:var(--plume-deep); }
  .qa p { color:var(--dim); line-height:1.78; font-size:.93rem; margin:0 0 24px; max-width:64ch; }

  /* ============ three ============ */
  .three-up { padding:6px 0 74px; }
  .three-up h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,3.2vw,2.5rem);
                 line-height:1.14; margin:0 auto 44px; max-width:20ch; text-align:center; }
  .three-up h2 em { font-style:italic; background:linear-gradient(96deg,var(--plume),var(--throat));
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .three { display:grid; grid-template-columns:repeat(3,1fr); gap:42px; }
  @media (max-width:860px){ .three{ grid-template-columns:1fr; gap:30px; } }
  .three h3 { font-family:var(--serif); font-weight:400; font-size:1.18rem; margin:0 0 10px; }
  .three p { color:var(--dim); line-height:1.72; font-size:.88rem; margin:0; }
  .three .n { font-family:var(--serif); font-style:italic; color:var(--throat); font-size:.98rem; display:block; margin-bottom:12px; }

  /* ============ close ============ */
  .close { padding:84px 0 92px; text-align:center; border-top:1px solid var(--line); }
  .close h2 { font-family:var(--serif); font-weight:400; font-size:clamp(2rem,4.4vw,3.3rem); line-height:1.1; margin:0 auto 18px; max-width:15ch; }
  .close h2 em { font-style:italic; background:linear-gradient(96deg,var(--plume),var(--throat));
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .close p { color:var(--dim); line-height:1.72; max-width:44ch; margin:0 auto 30px; }
  .close .cover__cta { margin-top:0; }

  footer { border-top:1px solid var(--line); padding:44px 0 52px; }
  .foot { display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
  .foot a { color:var(--dim); text-decoration:none; font-size:.82rem; line-height:2; display:block; }
  .foot a:hover { color:var(--plume-deep); }
  .foot .m { font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); margin:0 0 11px; }
  .foot address { font-style:normal; color:var(--dim); font-size:.82rem; line-height:2; }
  .foot__base { border-top:1px solid var(--line); margin-top:34px; padding-top:18px; display:flex;
                justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.68rem; color:var(--faint); letter-spacing:.08em; }

/* ============================================================
   INTERNAL PAGES
   ============================================================ */

/* Compact page header. Same rhythm as the homepage cover (kicker, title,
   then the identity bar) but sized for a page rather than a whole screen. */
.pagehead { padding:52px 0 44px; background:
    radial-gradient(80% 60% at 88% 2%, rgba(18,166,158,.16), transparent 60%),
    radial-gradient(70% 55% at 4% 92%, rgba(109,63,209,.14), transparent 62%),
    var(--ground-2); }
.pagehead .kicker { font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
                    color:var(--plume-deep); font-weight:500; margin:0 0 18px; }
.pagehead h1 { font-family:var(--serif); font-weight:400; font-size:clamp(2.1rem,4.6vw,3.5rem);
               line-height:1.06; letter-spacing:-.015em; margin:0 0 20px; max-width:17ch; }
.pagehead h1 em { font-style:italic; background:linear-gradient(96deg,var(--plume),var(--throat));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.pagehead p { color:var(--dim); line-height:1.72; font-size:1.02rem; margin:0; max-width:52ch; }
.pagehead .btns { margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; }

.section { padding:74px 0; }
.section + .section { border-top:1px solid var(--line); }
.section h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,3.2vw,2.5rem);
              line-height:1.12; margin:0 0 20px; max-width:20ch; }
.section h2 em { font-style:italic; background:linear-gradient(96deg,var(--plume),var(--throat));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.section p { color:var(--dim); line-height:1.75; margin:0 0 14px; max-width:58ch; }
.section .kicker { font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
                   color:var(--plume-deep); margin:0 0 18px; }

.split2 { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start; }
@media (max-width:900px){ .split2{ grid-template-columns:1fr; gap:32px; } }

.card { border:1px solid var(--line); padding:30px 32px; }
.card h3 { font-family:var(--serif); font-weight:400; font-size:1.3rem; margin:0 0 12px; }
.card p { font-size:.93rem; margin:0 0 16px; }
.card a.visit { display:inline-block; }

/* work page: one project per row, alternating */
.wp { border-top:1px solid var(--line); padding:56px 0;
      display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,340px); gap:48px; align-items:center; }
@media (max-width:960px){ .wp{ grid-template-columns:1fr; gap:28px; } }
@media (max-width:960px){ .wp__media{ order:-1; } }
.wp__kind { font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--plume-deep); margin:0 0 12px; font-weight:500; }
.wp__name { font-family:var(--serif); font-weight:500; font-size:1.55rem; display:block; margin-bottom:5px; }
.wp__tag { font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:16px; }
.wp__lead { font-family:var(--serif); font-style:italic; font-size:1.08rem; line-height:1.5; margin:0 0 14px; }
.wp__body { color:var(--dim); font-size:.9rem; line-height:1.75; margin:0 0 16px; }
.wp__shot { display:block; border:1px solid var(--line); box-shadow:0 20px 46px rgba(21,27,29,.16); background:#fff; }
.wp__shot img { width:100%; display:block; aspect-ratio:16/10; object-fit:cover; object-position:top center; }
.wp__shot + .wp__shot { margin-top:14px; }
.wp__note { border-top:1px solid var(--line); padding-top:14px; margin:0 0 16px; }
.wp__note span { display:block; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
                 color:var(--plume-deep); font-weight:700; margin-bottom:7px; }
.wp__note p { margin:0; color:var(--dim); font-size:.9rem; line-height:1.72; }

/* article index */
.posts { display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
@media (max-width:820px){ .posts{ grid-template-columns:1fr; } }
.post { background:var(--ground); padding:30px 30px 28px; display:block; text-decoration:none; color:inherit; transition:background .2s; }
.post:hover { background:var(--ground-2); }
.post span { font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--plume-deep); display:block; margin-bottom:12px; }
.post h3 { font-family:var(--serif); font-weight:400; font-size:1.25rem; line-height:1.25; margin:0 0 10px; }
.post p { color:var(--dim); font-size:.9rem; line-height:1.7; margin:0; }

/* Film block on internal pages. Needs its own positioning context or the
   absolutely positioned controls escape to the viewport corner. */
.vid { position:relative; overflow:hidden; background:#000; margin:0; cursor:pointer;
       border:1px solid var(--line); box-shadow:0 20px 46px rgba(21,27,29,.16); }
.vid video { width:100%; display:block; aspect-ratio:16/9; object-fit:contain; background:#000; }
.vid.is-sounding .port__btn[data-sound] { background:var(--plume); border-color:var(--plume); color:#fff; }

/* Screenshots sit in a laptop so they read as a site. Films do not, because a
   commercial is not a website and the laptop was claiming it was. */
.wp__media .laptop { max-width:none; }
.wp__media .laptop__lid { padding:9px 9px 12px; border-radius:11px 11px 3px 3px; }
.wp__media .laptop__base { width:108%; margin-left:-4%; }

/* ============================================================
   ARTICLE INDEX: big features, then featurettes, then a list
   ============================================================ */
.feat { display:grid; grid-template-columns:1.35fr 1fr; gap:2px; background:var(--line);
        border:1px solid var(--line); margin-bottom:56px; }
@media (max-width:900px){ .feat{ grid-template-columns:1fr; } }
.feat__lead { background:var(--ground); text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.feat__lead:hover .feat__img img { transform:scale(1.03); }
.feat__img { overflow:hidden; background:var(--ground-2); }
.feat__img img { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; transition:transform .5s cubic-bezier(.2,.6,.2,1); }
.feat__body { padding:30px 32px 34px; }
.feat__kick { font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--plume-deep); font-weight:700; display:block; margin-bottom:12px; }
.feat__lead h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.6vw,2.05rem);
                 line-height:1.16; margin:0 0 12px; max-width:22ch; }
.feat__lead p { color:var(--dim); font-size:.93rem; line-height:1.72; margin:0; max-width:52ch; }
.feat__side { background:var(--ground); display:grid; grid-template-rows:1fr 1fr; gap:2px; }
.feat__mini { background:var(--ground); text-decoration:none; color:inherit; padding:26px 28px;
              display:grid; grid-template-columns:170px 1fr; gap:22px; align-items:center; }
.feat__mini:hover { background:var(--ground-2); }
.feat__mini img { width:170px; height:130px; object-fit:cover; display:block; }
.feat__mini h3 { font-family:var(--serif); font-weight:400; font-size:1.08rem; line-height:1.25; margin:0 0 7px; }
.feat__mini span { font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--plume-deep); font-weight:700; display:block; margin-bottom:8px; }
@media (max-width:1040px){ .feat__mini{ grid-template-columns:130px 1fr; gap:18px; } .feat__mini img{ width:130px; height:100px; } }
@media (max-width:560px){ .feat__mini{ grid-template-columns:100px 1fr; gap:14px; padding:20px; } .feat__mini img{ width:100px; height:78px; } }

.cards3 { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-bottom:60px; }
@media (max-width:900px){ .cards3{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .cards3{ grid-template-columns:1fr; } }
.card3 { text-decoration:none; color:inherit; display:block; }
.card3 .shot { overflow:hidden; background:var(--ground-2); border:1px solid var(--line); }
.card3 img { width:100%; display:block; aspect-ratio:3/2; object-fit:cover; transition:transform .5s cubic-bezier(.2,.6,.2,1); }
.card3:hover img { transform:scale(1.04); }
.card3 span { font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--plume-deep); font-weight:700; display:block; margin:16px 0 8px; }
.card3 h3 { font-family:var(--serif); font-weight:400; font-size:1.16rem; line-height:1.25; margin:0 0 8px; }
.card3 p { color:var(--dim); font-size:.86rem; line-height:1.68; margin:0; }

.rest { border-top:1px solid var(--ink); }
.rest a { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:baseline;
          padding:20px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.rest a:hover h3 { color:var(--plume-deep); }
.rest h3 { font-family:var(--serif); font-weight:400; font-size:1.12rem; margin:0; line-height:1.3; }
.rest span { font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
@media (max-width:620px){ .rest a{ grid-template-columns:1fr; gap:6px; } }
.sec-rule { font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--plume-deep);
            font-weight:700; margin:0 0 22px; }

/* ============================================================
   ARTICLE (pillar + posts)
   ============================================================ */
.art { padding:56px 0 20px; }
.art__grid { display:grid; grid-template-columns:230px minmax(0,1fr); gap:60px; align-items:start; }
@media (max-width:960px){ .art__grid{ grid-template-columns:1fr; gap:30px; } }
.toc { position:sticky; top:96px; }
@media (max-width:960px){ .toc{ position:static; border:1px solid var(--line); padding:22px 24px; } }
.toc p { font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--plume-deep); font-weight:700; margin:0 0 14px; }
.toc ol { list-style:none; margin:0; padding:0; counter-reset:toc; }
.toc li { counter-increment:toc; border-top:1px solid var(--line); }
.toc a { display:grid; grid-template-columns:26px 1fr; gap:8px; padding:11px 0; color:var(--dim);
         text-decoration:none; font-size:.87rem; line-height:1.4; }
.toc a::before { content:counter(toc,decimal-leading-zero); color:var(--faint); font-size:.7rem; padding-top:2px; }
.toc a:hover { color:var(--plume-deep); }

.prose { max-width:68ch; }
.prose > p { color:var(--ink-soft,#3d4a4c); font-size:1.04rem; line-height:1.8; margin:0 0 22px; }
.prose h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,3vw,2.2rem);
            line-height:1.16; margin:52px 0 18px; scroll-margin-top:96px; }
.prose h2 em { font-style:italic; background:linear-gradient(96deg,var(--plume),var(--throat));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.prose h3 { font-family:var(--serif); font-weight:400; font-size:1.28rem; margin:34px 0 12px; }
.prose a { color:var(--plume-deep); text-decoration:none; border-bottom:1px solid var(--line-2); }
.prose a:hover { color:var(--throat); border-color:var(--throat); }
.prose ul, .prose ol { margin:0 0 22px; padding-left:0; list-style:none; }
.prose li { position:relative; padding:8px 0 8px 24px; line-height:1.72; color:var(--dim); font-size:.99rem; }
.prose li::before { content:""; position:absolute; left:0; top:19px; width:10px; height:1px; background:var(--plume); }
.prose blockquote { margin:0 0 26px; padding:4px 0 4px 22px; border-left:2px solid var(--plume); }
.prose blockquote p { font-family:var(--serif); font-style:italic; font-size:1.16rem; line-height:1.5; margin:0 0 8px; }
.prose blockquote cite { font-style:normal; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.ba { border:1px solid var(--line); margin:0 0 26px; }
.ba div { padding:18px 22px; }
.ba div + div { border-top:1px solid var(--line); }
.ba span { display:block; font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; margin-bottom:8px; }
.ba .was span { color:var(--faint); }
.ba .now span { color:var(--plume-deep); }
.ba .was p { margin:0; font-family:var(--serif); color:var(--faint); text-decoration:line-through;
             text-decoration-color:#c9c9c9; font-size:1.02rem; }
.ba .now p { margin:0; font-family:var(--serif); font-size:1.28rem; line-height:1.3; }
.pullout { background:var(--ground-2); border-left:2px solid var(--plume); padding:24px 26px; margin:0 0 26px; }
.pullout p { margin:0; font-size:.96rem; line-height:1.75; color:var(--dim); }
.pullout b { color:var(--ink); }
.upnote { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 30px; }
.upnote a { color:var(--plume-deep); text-decoration:none; border-bottom:1px solid var(--line-2); }
.keep { border-top:1px solid var(--ink); margin-top:56px; padding-top:26px; }
.keep p.sec-rule { margin-bottom:16px; }
.keep a { display:block; padding:14px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.keep a:hover h4 { color:var(--plume-deep); }
.keep h4 { font-family:var(--serif); font-weight:400; font-size:1.05rem; margin:0; line-height:1.35; }

/* Article pages lead with the nav, so the reader knows where they are before
   they start reading. The bar is not sticky here, the header sits under it. */
.idbar--top { position:static; border-top:0; }
.idbar--top + .pagehead { border-bottom:1px solid var(--line); }
.wp__cap { font-size:.72rem; line-height:1.6; color:var(--faint); margin:12px 0 0; }

/* ============================================================
   BRAINSTORM FORM
   Two columns: the questions on the left, the live read on the
   right. The read is sticky, so the diagnosis stays visible while
   they keep answering. That is the point of the page.
   ============================================================ */
.bs { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:56px; align-items:start; }
@media (max-width:940px){ .bs{ grid-template-columns:1fr; gap:34px; } }

.bs__step { border-top:1px solid var(--ink); padding-top:22px; margin-top:44px; }
.bs__step:first-of-type { margin-top:0; }
.bs__step > h2 { font-family:var(--serif); font-weight:400; font-size:1.45rem; margin:0 0 8px; max-width:none; }
.bs__help { color:var(--faint); font-size:.86rem; line-height:1.7; margin:0 0 24px; max-width:56ch; }

.bs label.f { display:block; margin:0 0 22px; font-size:.82rem; letter-spacing:.02em;
              font-weight:500; color:var(--ink); }
.bs .req { font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
           font-weight:500; margin-left:8px; }
.bs .hint { display:block; font-weight:400; color:var(--faint); font-size:.78rem;
            line-height:1.6; margin:5px 0 0; }
.bs input[type=text], .bs input[type=email], .bs select, .bs textarea {
  width:100%; margin-top:9px; font-family:var(--sans); font-size:.95rem; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:0; padding:13px 14px;
  line-height:1.5; -webkit-appearance:none; appearance:none; transition:border-color .15s, box-shadow .15s; }
.bs textarea { resize:vertical; min-height:92px; }
.bs select { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%234F6164' stroke-width='1.6'/></svg>");
             background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
.bs input:focus, .bs select:focus, .bs textarea:focus {
  outline:none; border-color:var(--plume); box-shadow:0 0 0 3px rgba(15,143,136,.13); }
.bs .row2 { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
@media (max-width:560px){ .bs .row2{ grid-template-columns:1fr; } }

.bs fieldset { border:0; padding:0; margin:0 0 22px; }
.bs legend { font-size:.82rem; font-weight:500; color:var(--ink); padding:0; margin-bottom:10px; }
.bs .opts { display:flex; flex-wrap:wrap; gap:8px; }
.bs .opt { position:relative; }
.bs .opt input { position:absolute; opacity:0; width:0; height:0; }
.bs .opt span { display:block; border:1px solid var(--line); padding:9px 14px; font-size:.84rem;
                color:var(--dim); cursor:pointer; background:var(--panel); transition:all .15s; }
.bs .opt input:checked + span { border-color:var(--plume); color:var(--plume-deep);
                                background:rgba(15,143,136,.07); font-weight:500; }
.bs .opt input:focus-visible + span { box-shadow:0 0 0 3px rgba(15,143,136,.2); }
.bs .stack { flex-direction:column; align-items:stretch; }
.bs .stack .opt span { padding:11px 15px; }

.bs__err { color:#9B2C2C; font-size:.86rem; margin:0 0 16px; }
.bs__fine { color:var(--faint); font-size:.78rem; line-height:1.65; margin:14px 0 0; max-width:48ch; }
.bs__submit { margin-top:8px; }

/* The live read */
.read { position:sticky; top:24px; border:1px solid var(--ink); background:var(--panel); }
@media (max-width:940px){ .read{ position:static; } }
.read__head { background:var(--ink); color:var(--ground); padding:14px 22px; }
.read__head p { margin:0; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
                font-weight:700; color:#9FD8D4; }
.read__body { padding:24px 22px 26px; }
.read__idle { color:var(--faint); font-size:.88rem; line-height:1.75; margin:0; }
.read__stat { text-align:center; border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:20px; }
.read__num { font-family:var(--serif); font-size:3.2rem; line-height:1; display:block;
             background:linear-gradient(96deg,var(--plume),var(--throat));
             -webkit-background-clip:text; background-clip:text; color:transparent; }
.read__lab { display:block; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
             color:var(--faint); margin-top:10px; }
.read__note { font-family:var(--serif); font-size:1.06rem; line-height:1.5; color:var(--ink); margin:0 0 16px; }
.read__line { border-top:1px solid var(--line); padding-top:14px; margin:14px 0 0; }
.read__line span { display:block; font-size:.55rem; letter-spacing:.2em; text-transform:uppercase;
                   color:var(--plume-deep); font-weight:700; margin-bottom:7px; }
.read__line p { margin:0; color:var(--dim); font-size:.86rem; line-height:1.72; }
.read__foot { border-top:1px solid var(--line); padding:14px 22px; }
.read__foot p { margin:0; color:var(--faint); font-size:.73rem; line-height:1.6; }

.bs__thanks { border:1px solid var(--ink); padding:40px 42px; }
.bs__thanks h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 14px; }
.bs__thanks p { color:var(--dim); line-height:1.75; margin:0 0 14px; max-width:52ch; }

/* A full-width work row, for the one project where the before and after are
   the whole argument and a 340px column would waste them. */
.wp--wide { grid-template-columns:1fr; gap:34px; }
.wp--wide .wp__lead { font-size:1.35rem; max-width:24ch; }
.wp--wide .wp__body { max-width:64ch; }
.mockpair { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
@media (max-width:760px){ .mockpair{ grid-template-columns:1fr; gap:22px; } }
/* The mockups are flattened onto the page ground, so they need no frame. */
.mockpair figure { margin:0; }
.mockpair img { width:100%; display:block; }
.mockpair figcaption { margin-top:10px; }
.mockpair span { display:block; font-size:.56rem; letter-spacing:.22em; text-transform:uppercase;
                 font-weight:700; margin-bottom:7px; }
.mockpair .was span { color:var(--faint); }
.mockpair .now span { color:var(--plume-deep); }
.mockpair p { margin:0; font-family:var(--serif); font-size:1.02rem; line-height:1.35; }
.mockpair .was p { color:var(--faint); }
.mockpair .now p { color:var(--ink); }

/* Device mockups already carry their own frame and are flattened onto the page
   ground, so they take no border, no shadow and no crop. */
.wp__mock { width:100%; display:block; }

/* Film rows mirror the screenshot rows: copy on the left, the film on the right.
   The media column stays the wide one either way, so the page reads as one
   rhythm rather than two layouts. */
.wp--film { grid-template-columns:minmax(280px,340px) minmax(0,1fr); }
@media (max-width:960px){ .wp--film{ grid-template-columns:1fr; } }

/* Films on the work page: a faint frame and rounded corners, nothing else. The
   clip has to carry itself without a device pretending to hold it. */
.wp__media .vid { border:1px solid var(--line); border-radius:12px; box-shadow:none; }
.wp__media .vid video { border-radius:11px; }

/* Byline under an article headline. */
.pagehead .byline { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
                    color:var(--faint); margin-top:18px; }
/* Legacy article bodies carry comparison tables. */
.prose table { width:100%; border-collapse:collapse; margin:0 0 26px; font-size:.92rem; }
.prose th, .prose td { border:1px solid var(--line); padding:11px 13px; text-align:left; vertical-align:top; }
.prose th { background:var(--ground-2); font-weight:700; font-size:.78rem;
            letter-spacing:.06em; text-transform:uppercase; color:var(--plume-deep); }
.prose td { color:var(--dim); line-height:1.6; }
.prose hr { border:0; border-top:1px solid var(--line); margin:34px 0; }
.prose img { max-width:100%; height:auto; display:block; margin:0 0 22px; }
.prose figure { margin:0 0 26px; }

/* ============================================================
   THE SCANNER (/test)
   Class names are fixed by the JavaScript that injects results,
   so the markup contract is unchanged and only the skin moved
   onto the site palette.
   ============================================================ */
.scan-hero { background:
    radial-gradient(80% 60% at 88% 2%, rgba(18,166,158,.16), transparent 60%),
    radial-gradient(70% 55% at 4% 92%, rgba(109,63,209,.14), transparent 62%),
    var(--ground-2); padding:64px 0 58px; text-align:center; }
.scan-hero h1 { font-family:var(--serif); font-weight:400; font-size:clamp(2rem,4.4vw,3.2rem);
                line-height:1.08; letter-spacing:-.015em; margin:0 auto 20px; max-width:20ch; }
.scan-hero .scan-lede { color:var(--dim); font-size:1.02rem; line-height:1.72;
                        max-width:60ch; margin:0 auto 32px; }
.scan-form { display:flex; gap:10px; max-width:560px; margin:0 auto; }
.scan-form input[type=url] { flex:1 1 auto; min-width:0; padding:15px 17px; font-family:var(--sans);
  font-size:1rem; color:var(--ink); background:var(--panel); border:1px solid var(--line);
  border-radius:0; -webkit-appearance:none; appearance:none; transition:border-color .15s, box-shadow .15s; }
.scan-form input[type=url]:focus { outline:none; border-color:var(--plume); box-shadow:0 0 0 3px rgba(15,143,136,.13); }
.scan-form button { flex:0 0 auto; padding:15px 30px; font-family:var(--sans); font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase; font-weight:700; border:1px solid var(--ink);
  border-radius:0; background:var(--ink); color:var(--ground); cursor:pointer; transition:background .2s; }
.scan-form button:hover { background:var(--plume-deep); border-color:var(--plume-deep); }
.scan-form button[disabled] { opacity:.5; cursor:default; }
@media (max-width:575px){ .scan-form{ flex-direction:column; } }
.scan-note { color:var(--faint); font-size:.78rem; margin-top:14px; }

.scan-results { padding:58px 0 20px; display:none; }
.scan-results.is-visible { display:block; }
.scan-error { max-width:62ch; margin:0 auto; padding:22px 26px; background:var(--panel);
              border-left:3px solid #9B2C2C; color:#7A2C22; line-height:1.7; }

.scan-scorecard { display:flex; align-items:center; gap:30px; flex-wrap:wrap;
                  padding-bottom:28px; border-bottom:1px solid var(--line); margin-bottom:34px; }
.scan-ring { flex:0 0 auto; width:116px; height:116px; border-radius:50%;
             display:grid; place-items:center; position:relative; }
.scan-ring::after { content:""; position:absolute; inset:9px; background:var(--ground); border-radius:50%; }
.scan-ring span { position:relative; z-index:1; font-family:var(--serif); font-size:2.3rem; color:var(--ink); line-height:1; }
.scan-verdict h2 { font-family:var(--serif); font-weight:400; font-size:1.7rem; color:var(--ink); margin:0 0 7px; }
.scan-verdict p { color:var(--dim); margin:0; font-size:.9rem; word-break:break-word; }

.scan-stat { background:var(--ink); color:var(--ground); padding:30px 32px; margin-bottom:34px; }
.scan-stat .scan-stat-num { font-family:var(--serif); font-size:3rem; line-height:1;
  background:linear-gradient(96deg,var(--plume-lit),#A98BF0); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.scan-stat p { margin:12px 0 0; color:rgba(246,243,236,.78); line-height:1.7; }

.scan-finding { border:1px solid var(--line); border-left:2px solid var(--plume);
                padding:24px 26px; margin-bottom:18px; background:var(--panel); }
.scan-finding h3 { font-family:var(--serif); font-weight:400; font-size:1.24rem; color:var(--ink); margin:0 0 10px; }
.scan-finding p { margin:0 0 10px; color:var(--dim); line-height:1.7; font-size:.94rem; }
.scan-finding .scan-fix { margin:0; padding-top:12px; border-top:1px solid var(--line); color:var(--ink); }
.scan-finding .scan-fix strong { color:var(--plume-deep); }
.scan-finding blockquote { margin:0 0 10px; padding:6px 0 6px 16px; border-left:2px solid var(--line);
  color:var(--faint); font-family:var(--serif); font-style:italic; font-size:1rem; }

.scan-cta { background:var(--ground-2); padding:38px 34px; margin-top:40px; text-align:center; }
.scan-cta h3 { font-family:var(--serif); font-weight:400; font-size:1.6rem; color:var(--ink); margin:0 0 12px; }
.scan-cta p { color:var(--dim); max-width:58ch; margin:0 auto 22px; line-height:1.7; }
.scan-cta .scan-proof { font-size:.8rem; color:var(--faint); margin:18px 0 0; }
.scan-btn, .scan-btn-inline { display:inline-block; padding:14px 32px; background:var(--ink);
  color:var(--ground); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; text-decoration:none; border:1px solid var(--ink); transition:background .2s; }
.scan-btn:hover, .scan-btn-inline:hover { background:var(--plume-deep); border-color:var(--plume-deep); color:var(--ground); }

.scan-email { margin-top:26px; padding-top:24px; border-top:1px solid var(--line); }
.scan-email p { font-size:.9rem; margin-bottom:14px; }
.scan-email form { display:flex; gap:8px; max-width:430px; margin:0 auto; }
.scan-email input[type=email] { flex:1 1 auto; min-width:0; padding:12px 14px;
  font-family:var(--sans); border:1px solid var(--line); border-radius:0; background:var(--panel); }
.scan-email input[type=email]:focus { outline:none; border-color:var(--plume); box-shadow:0 0 0 3px rgba(15,143,136,.13); }
.scan-email button { flex:0 0 auto; padding:12px 22px; border:1px solid var(--ink); border-radius:0;
  background:var(--ink); color:var(--ground); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; cursor:pointer; }
.scan-hp { position:absolute; left:-9999px; }
.scan-spinner { text-align:center; padding:40px 0; color:var(--faint); }

.scan-explainer { padding:70px 0 80px; border-top:1px solid var(--line); }
.scan-explainer h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,3.2vw,2.4rem);
                     color:var(--ink); margin:0 0 18px; line-height:1.14; max-width:20ch; }
.scan-explainer h3 { font-family:var(--serif); font-weight:400; font-size:1.26rem; color:var(--ink); margin:34px 0 10px; }
.scan-explainer p { color:var(--dim); line-height:1.78; font-size:1rem; max-width:64ch; }

/* Labels that exist for screen readers only. Bootstrap used to supply this. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
           overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ============================================================
   REVIEW PASS: mobile home page
   ============================================================ */

/* The test panel sits beside the problem headline on desktop and below the four
   symptoms on mobile, so it reads as the answer to them rather than an aside
   nobody has been given a reason to care about yet. */
.problem > .wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,320px);
                   gap:0 48px; align-items:start; }
.problem__top { grid-column:1; grid-row:1; display:block; }
.problem__aside { grid-column:2; grid-row:1; }
.symptoms { grid-column:1 / -1; grid-row:2; }
@media (max-width:900px){
  .problem > .wrap { display:flex; flex-direction:column; }
  .problem__top { order:1; }
  .symptoms { order:2; margin-bottom:0; }
  .problem__aside { order:3; margin-top:38px; }
}

/* The proof line belongs under the headline it is talking about. On desktop it
   stays where it was, as the fourth coverline. */
.cover__proof { display:none; }
@media (max-width:900px){
  .cover__proof { display:block; text-align:center; color:var(--dim); font-size:.95rem;
                  line-height:1.7; max-width:44ch; margin:0 auto 30px; }
  .coverline--proof { display:none; }
  /* Three identical "What you get" labels stacked vertically is just noise. */
  .cover__side .coverline i { display:none; }
  .coverline { border-top:0; padding-top:0; margin-bottom:30px; }
  .cover__stage .laptop { max-width:90%; margin-inline:auto; }
  .cover__kicker { margin-bottom:22px; }
  .cover__hed { margin-bottom:22px; }
  .cover__grid { gap:44px; padding-top:12px; }
  .cover__sheet { padding-top:26px; padding-bottom:62px; }
}

/* The fix section reads as a statement, so it is centred at every width. */
.fix__head { text-align:center; margin-left:auto; margin-right:auto; }
.fix__head .kicker { text-align:center; }
.fix__head h2, .fix__head p { margin-left:auto; margin-right:auto; }
.fix__head h2 { max-width:22ch; }
.fix__head p { max-width:56ch; }

/* One call to action for both ways of working, because the next step is the
   same conversation whichever one they picked. */
.fix__cta { text-align:center; margin-top:40px; }
.fix__cta p { color:var(--faint); font-size:.82rem; margin:16px 0 0; }

/* Project names scroll sideways rather than wrapping onto three lines. */
@media (max-width:760px){
  .showcase__tabs { flex-wrap:nowrap; overflow-x:auto;
                    -webkit-overflow-scrolling:touch; scrollbar-width:none;
                    margin:0 -18px; padding:0 18px; }
  .showcase__tabs::-webkit-scrollbar { display:none; }
  .showcase__tabs button { flex:0 0 auto; padding:16px 22px 13px 0; white-space:nowrap; }
  .slide.is-on { gap:24px; }
  .work__head { gap:14px; }
}

/* ============================================================
   FOOTER
   Light on desktop, where the page has room to breathe. Dark on
   mobile, so the site ends on something deliberate instead of
   trailing off into the same cream as everything above it.
   ============================================================ */
.foot__logo { display:block; height:34px; width:auto; }
.foot__logo--light { display:none; }
footer { padding:56px 0 40px; }
.foot { align-items:start; }
.foot a { transition:color .18s; }
.foot a:hover { color:var(--plume-deep); }
.foot p.m { font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
            color:var(--faint); font-weight:700; margin:0 0 14px; }

@media (max-width:760px){
  footer { background:var(--ink); color:var(--ground); border-top:0; margin-top:0;
           padding:52px 0 34px; }
  .foot__logo--dark { display:none; }
  .foot > div:first-child a { display:block; }
  .foot__logo--light { display:block; height:38px; margin:0 auto 34px; }
  .foot { display:grid; grid-template-columns:1fr 1fr; gap:32px 24px; text-align:left; }
  .foot > div:first-child { grid-column:1 / -1; text-align:center; }
  .foot p.m { color:#8FC7C3; }
  .foot a, .foot address { color:rgba(246,243,236,.82); }
  .foot a:hover { color:#fff; }
  .foot__base { grid-column:1 / -1; border-top:1px solid rgba(246,243,236,.16);
                margin-top:34px; padding-top:20px; color:rgba(246,243,236,.5);
                flex-direction:column; align-items:center; text-align:center; gap:8px; }
}

/* ============================================================
   MOBILE NAV
   Under 760px the three-column bar becomes logo left, toggle
   right, and the links move into a panel that opens beneath it.
   ============================================================ */
.idbar__toggle { display:none; }
@media (max-width:760px){
  .idbar__inner { grid-template-columns:auto 1fr auto; gap:0; padding:12px 18px; }
  .idbar__mark { grid-column:1; justify-self:start; }
  .idbar__mark img { height:30px; }
  .idbar__nav { display:none; }

  .idbar__toggle { display:grid; grid-column:3; justify-self:end; place-items:center;
    width:42px; height:42px; margin-right:-8px; background:none; border:0; cursor:pointer;
    -webkit-tap-highlight-color:transparent; }
  .idbar__toggle span { display:block; width:22px; height:1.5px; background:var(--ink);
    border-radius:2px; transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .18s; }
  .idbar__toggle span + span { margin-top:5px; }
  .idbar__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .idbar__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .idbar__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  .navpanel { position:fixed; inset:0 0 0 0; z-index:60; background:var(--ink); color:var(--ground);
    display:flex; flex-direction:column; justify-content:space-between; padding:22px 26px 34px;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .26s ease, transform .26s cubic-bezier(.4,0,.2,1), visibility .26s; }
  .navpanel.is-open { opacity:1; visibility:visible; transform:none; }
  .navpanel__top { display:flex; justify-content:space-between; align-items:center; }
  .navpanel__top img { height:30px; width:auto; display:block; }
  .navpanel__close { width:42px; height:42px; margin-right:-10px; background:none; border:0;
    color:var(--ground); font-size:1.7rem; line-height:1; cursor:pointer; }
  .navpanel__links { display:flex; flex-direction:column; gap:2px; margin:0; padding:0; list-style:none; }
  .navpanel__links a { display:block; font-family:var(--serif); font-size:1.9rem; line-height:1.25;
    color:var(--ground); text-decoration:none; padding:9px 0; }
  .navpanel__links a:active { color:#8FC7C3; }
  .navpanel__foot { border-top:1px solid rgba(246,243,236,.18); padding-top:20px; }
  .navpanel__foot p { margin:0 0 6px; font-size:.56rem; letter-spacing:.24em;
    text-transform:uppercase; color:#8FC7C3; font-weight:700; }
  .navpanel__foot a { color:rgba(246,243,236,.86); text-decoration:none; font-size:.95rem; display:block; }
  .navpanel__foot address { font-style:normal; color:rgba(246,243,236,.55); font-size:.82rem; margin-top:10px; }
  body.nav-open { overflow:hidden; }
}
@media (min-width:761px){ .navpanel { display:none; } }

/* Work rows: the rule between projects is the only rule. The "What happened"
   block used to carry its own border, which read as a second divider and made
   the spacing look uneven. Its heading is enough. */
.wp__note { border-top:0; padding-top:0; margin:22px 0 18px; }
/* More air either side of each rule, so a project reads as its own block
   rather than as a list item. */
.wp { padding:78px 0; }
/* The first row has no rule above it, but it still needs clearance from the
   sticky bar. It was sitting flush against it. */
.wp:first-of-type { border-top:0; padding-top:52px; }
@media (max-width:960px){
  .wp { padding:48px 0; gap:24px; }
  .wp--film { padding:48px 0; }
  .wp:first-of-type { padding-top:34px; }
  .wp__cap { margin-top:10px; }
}

/* ============================================================
   HERO COLUMNS
   The headline sits in its own full-width row so the coverlines
   can start at the top of row two, level with the laptop lid,
   rather than being centred against the whole column.
   ============================================================ */
.cover__head { grid-column:1 / -1; }
.cover__grid { align-items:start; }
@media (min-width:901px){
  .cover__grid { row-gap:0; }
  .cover__side { padding-top:0; }
}
/* The first line in each column needs no rule above it; the headline is the
   thing above it. The rule between the two is now an even split. */
.cover__side .coverline:first-child { border-top:0; padding-top:0; }
.coverline { padding-top:20px; margin-bottom:20px; }
.cover__side .coverline:last-child { margin-bottom:0; }
@media (max-width:900px){
  .cover__head { order:-2; }
  .cover__stage { order:-1; }
  .coverline { padding-top:0; margin-bottom:30px; }
}

/* ============================================================
   PRESS
   The films lead. Everything else supports them.
   ============================================================ */
.reel { margin:0 0 64px; }
.reel__film { position:relative; overflow:hidden; background:#000; margin:0; cursor:pointer;
              border:1px solid var(--line); border-radius:12px;
              box-shadow:0 26px 60px rgba(21,27,29,.20); }
.reel__film video { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:#000; }
.reel__film.is-sounding .port__btn[data-sound] { background:var(--plume); border-color:var(--plume); color:#fff; }
.reel__meta { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:end; margin-top:20px; }
@media (max-width:640px){ .reel__meta{ grid-template-columns:1fr; align-items:start; gap:10px; } }
.reel__kick { font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
              color:var(--plume-deep); font-weight:700; margin:0 0 10px; }
.reel__title { font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,3vw,2.2rem);
               line-height:1.14; margin:0 0 10px; max-width:22ch; }
.reel__note { color:var(--dim); font-size:.93rem; line-height:1.7; margin:0; max-width:56ch; }
.reel__where { font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
               color:var(--faint); white-space:nowrap; }

.reels2 { display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-bottom:64px; }
@media (max-width:820px){ .reels2{ grid-template-columns:1fr; gap:48px; } }
.reels2 .reel__title { font-size:clamp(1.2rem,2.2vw,1.45rem); }
.reels2 .reel__meta { grid-template-columns:1fr; align-items:start; gap:8px; }

/* Everything that lives on YouTube: real thumbnail, plays where it lives. */
.ytgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px 26px; }
@media (max-width:900px){ .ytgrid{ grid-template-columns:1fr 1fr; gap:26px 20px; } }
@media (max-width:560px){ .ytgrid{ grid-template-columns:1fr; } }
.yt { text-decoration:none; color:inherit; display:block; }
.yt__shot { position:relative; overflow:hidden; border:1px solid var(--line); background:var(--ground-2); border-radius:8px; }
.yt__shot img { width:100%; display:block; aspect-ratio:16/9; object-fit:cover;
                transition:transform .5s cubic-bezier(.2,.6,.2,1); }
.yt:hover .yt__shot img { transform:scale(1.04); }
.yt__play { position:absolute; inset:0; display:grid; place-items:center; }
.yt__play span { width:52px; height:52px; border-radius:50%; background:rgba(21,27,29,.62);
                 display:grid; place-items:center; transition:background .2s; }
.yt__play span::after { content:""; border-left:13px solid #fff; border-top:8px solid transparent;
                        border-bottom:8px solid transparent; margin-left:4px; }
.yt:hover .yt__play span { background:var(--plume); }
.yt h3 { font-family:var(--serif); font-weight:400; font-size:1.08rem; line-height:1.3; margin:14px 0 6px; }
.yt span.where { font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); }

/* The booking band, dropped in among the films rather than parked at the top. */
.booking { background:var(--ink); color:var(--ground); border-radius:14px;
           padding:46px 48px; margin:0 0 64px; display:grid;
           grid-template-columns:1.15fr .85fr; gap:44px; align-items:center; }
@media (max-width:820px){ .booking{ grid-template-columns:1fr; gap:26px; padding:34px 26px; } }
.booking h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,3vw,2.2rem);
              line-height:1.14; margin:0 0 14px; max-width:18ch; }
.booking h2 em { font-style:italic; background:linear-gradient(96deg,var(--plume-lit),#A98BF0);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.booking p { color:rgba(246,243,236,.78); line-height:1.75; margin:0 0 10px; max-width:52ch; }
.booking .btns { margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; }
.booking .btn-out { border-color:rgba(246,243,236,.4); color:var(--ground); }
.booking .btn-out:hover { border-color:var(--ground); background:rgba(246,243,236,.08); }
.booking figure { margin:0; }
.booking img { width:100%; display:block; border-radius:10px; }

/* ============================================================
   HERO SPACING PASS
   ============================================================ */
@media (min-width:901px){
  /* Air above the first line in each column. */
  .cover__side .coverline:first-child { padding-top:25px; }
  /* The kicker belongs to the headline, so it sits closer to it, */
  .cover__kicker { margin-bottom:12px; }
  /* and the headline gets room before the film rather than sitting on it. */
  .cover__head { margin-bottom:26px; }
  .cover__hed { margin-bottom:0; }
}
/* One call to action under the film, at every width. */
.cover__cta2 { text-align:center; margin-top:34px; }
@media (max-width:900px){
  .cover__cta2 { margin-top:26px; }
  .cover__head { margin-bottom:4px; }
}

/* On a narrow screen two buttons side by side leave neither enough room, so
   they go full width and stack. */
@media (max-width:520px){
  .btns, .cover__cta, .booking .btns { flex-direction:column; align-items:stretch; }
  .btns .btn, .cover__cta .btn, .booking .btns .btn { width:100%; }
}

/* ============================================================
   HERO: explicit placement now that the CTA is a grid sibling
   ============================================================ */
@media (min-width:901px){
  .cover__grid { grid-template-columns:210px 1fr 210px; }
  .cover__head   { grid-column:1 / -1; grid-row:1; }
  .cover__grid > div:nth-child(2) { grid-column:1; grid-row:2; }  /* left column  */
  .cover__stage  { grid-column:2; grid-row:2; }
  .cover__grid > div:nth-child(4) { grid-column:3; grid-row:2; }  /* right column */
  .cover__cta2   { grid-column:2; grid-row:3; margin-top:34px; }
}

/* ---- mobile hero rhythm ---------------------------------- */
@media (max-width:900px){
  /* Reading order: headline, film, the three benefits, then the ask. */
  .cover__head { order:-3; }
  .cover__stage { order:-2; }
  .cover__grid > div:nth-child(2) { order:-1; }
  .cover__grid > div:nth-child(4) { order:0; }
  /* The gap between benefits comes from the container only. A margin-bottom on
     top of it made the first pair 30px and the second 16px. */
  .cover__cta2 { order:1; margin-top:18px; }

  .cover__hed { font-size:clamp(1.95rem,7.4vw,2.6rem); }
  .cover__kicker { margin-bottom:44px; }   /* double the old 22px */
  .cover__hed { margin-bottom:11px; }      /* half the old 22px */
  .cover__head { margin-bottom:0; }
  .cover__proof { margin:0 auto; }
  .cover__stage .laptop { margin-top:0; }
  .cover__grid { gap:16px; }
  .coverline { margin-bottom:0; }
  .cover__side { display:grid; gap:16px; }
  /* Air under the film before the benefits start. */
  .cover__grid > div:nth-child(2) { margin-top:24px; }

  /* The label belongs over the first benefit only. Three of them stacked was
     the noise that got them switched off in the first place. */
  .cover__side .coverline i { display:none; }
  .cover__grid > div:nth-child(2) .coverline:first-child i { display:block; }
}