:root{
    --white:#FFFFFF;
    --stone:#F4F4F1;
    --ink:#101418;
    --ink-soft:#4A5158;
    --line:#E2E2DC;
    --blue:#1741C8;
    --gold:#FFC300;
    --container:1180px;
    --ease:cubic-bezier(.22,.61,.36,1);
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px;}
  body{
    margin:0;
    background:var(--white);
    color:var(--ink);
    font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
    font-size:17px;
    line-height:1.65;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}

  h1,h2,h3,.wordmark{
    font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
    font-weight:800;
    letter-spacing:-0.035em;
    line-height:1.04;
    margin:0;
  }
  h3{font-weight:700;letter-spacing:-0.02em;line-height:1.2;}
  p{margin:0;}

  :focus-visible{
    outline:3px solid var(--blue);
    outline-offset:3px;
    border-radius:2px;
  }
  .band--blue :focus-visible{outline-color:var(--gold);}

  /* ---------- band system ---------- */
  .band{padding:clamp(56px,8vw,112px) 24px;}
  .band--stone{background:var(--stone);}
  .band--blue{background:var(--blue);color:var(--white);}
  .band--tight{padding-top:clamp(28px,4vw,40px);padding-bottom:clamp(28px,4vw,40px);}
  .wrap{max-width:var(--container);margin:0 auto;width:100%;}

  .label{
    font-size:12px;
    font-weight:600;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin:0 0 18px;
  }
  .band--blue .label{color:rgba(255,255,255,.78);}

  .band-head h2{
    font-size:clamp(30px,4.6vw,52px);
    max-width:18ch;
  }
  .band-head{margin-bottom:clamp(36px,5vw,60px);}
  .band-lede{margin-top:16px;font-size:clamp(16.5px,1.4vw,19px);color:var(--ink-soft);max-width:56ch;}

  .mark{
    background-image:linear-gradient(to bottom,transparent 60%,var(--gold) 60%,var(--gold) 95%,transparent 95%);
    background-repeat:no-repeat;
    background-size:100% 100%;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
  }
  .js .mark{background-size:0% 100%;}
  .js .mark.swipe{background-size:100% 100%;transition:background-size .8s var(--ease) .1s;}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    gap:8px;
    font-family:inherit;font-size:16px;font-weight:600;
    padding:15px 26px;
    border-radius:999px;
    border:1.5px solid transparent;
    text-decoration:none;
    cursor:pointer;
    transition:background-color .18s ease,color .18s ease,border-color .18s ease;
  }
  .btn--primary{background:var(--blue);color:var(--white);}
  .btn--primary:hover{background:#0F31A0;}
  .btn--ghost{background:transparent;color:var(--ink);border-color:#C9C9C2;}
  .btn--ghost:hover{border-color:var(--ink);}
  .btn--gold{background:var(--gold);color:var(--ink);}
  .btn--gold:hover{background:#EFB600;}
  .btn--sm{padding:11px 20px;font-size:15px;}
  .btn{white-space:nowrap;}
  .lbl-sm{display:none;}

  /* ---------- nav ---------- */
  .nav{
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    backdrop-filter:saturate(180%) blur(12px);
    position:sticky;top:0;z-index:50;
    transition:box-shadow .28s ease;
  }
  .nav.stuck{box-shadow:0 8px 30px -20px rgba(16,20,24,.55);}
  .nav-inner{
    max-width:var(--container);margin:0 auto;
    display:flex;align-items:center;gap:20px;
    padding:14px 24px;
  }
  .brand{text-decoration:none;margin-right:auto;display:flex;align-items:center;gap:11px;}
  .logo-mark{height:38px;width:auto;flex:none;}
  .wordmark{font-size:22px;letter-spacing:-0.03em;line-height:1;}
  .wordmark .w2{color:var(--blue);}
  .brand small{
    display:block;
    font-family:"Instrument Sans",sans-serif;
    font-size:11px;font-weight:500;letter-spacing:0.05em;
    color:var(--ink-soft);margin-top:4px;
  }
  .nav-links{display:flex;gap:22px;list-style:none;margin:0;padding:0;}
  .nav-links a{font-size:15px;font-weight:500;text-decoration:none;color:var(--ink-soft);white-space:nowrap;}
  .nav-links a:hover{color:var(--ink);}

  .burger{
    display:none;
    width:42px;height:38px;
    align-items:center;justify-content:center;
    flex-direction:column;gap:5px;
    background:transparent;border:1px solid var(--line);border-radius:10px;
    cursor:pointer;flex:none;
  }
  .burger span{
    display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;
    transition:transform .26s var(--ease),opacity .2s ease;
  }
  .nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav.open .burger span:nth-child(2){opacity:0;}
  .nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* ---------- hero ---------- */
  .hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(32px,5vw,72px);
    align-items:center;
  }
  .hero h1{
    font-size:clamp(38px,6.2vw,72px);
    max-width:12ch;
  }
  .hero-sub{
    margin-top:24px;
    font-size:clamp(17px,1.5vw,20px);
    color:var(--ink-soft);
    max-width:46ch;
  }
  .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
  .hero-note{margin-top:18px;font-size:15px;color:var(--ink-soft);max-width:46ch;}
  .hero-figure{
    margin:0;
    aspect-ratio:4/5;
    overflow:hidden;
    border-radius:4px;
    background:var(--stone);
  }
  .hero-figure img{width:100%;height:100%;object-fit:cover;}

  /* ---------- trust ---------- */
  .trust-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .trust p.trust-title{font-size:14px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);margin-bottom:14px;}
  .trust ul{display:flex;flex-wrap:wrap;gap:10px 30px;list-style:none;margin:0;padding:0;}
  .trust li{font-size:17px;font-weight:600;letter-spacing:-0.01em;}
  .trust-note{margin-top:16px;font-size:13.5px;line-height:1.5;color:#6D737B;max-width:78ch;}

  /* ---------- card grid (services + samples) ---------- */
  .cardgrid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .samplegrid{grid-template-columns:repeat(5,minmax(0,1fr));}
  .card{
    background:var(--white);
    padding:26px;
    display:flex;flex-direction:column;
    transition:background-color .18s ease;
  }
  .card .num{
    font-family:"Bricolage Grotesque",sans-serif;
    font-weight:700;font-size:12px;letter-spacing:.1em;
    color:var(--blue);
    margin-bottom:14px;
  }
  .card h3{font-size:19px;margin-bottom:8px;}
  .card p{font-size:14.5px;line-height:1.55;color:var(--ink-soft);}
  .card .go{
    align-self:flex-start;
    margin-top:auto;
    padding-top:18px;
    font-size:13.5px;font-weight:600;
    text-decoration:none;
    border-bottom:2px solid var(--gold);
    padding-bottom:2px;
  }
  .card:hover .go{border-bottom-color:var(--blue);}
  .card--dark{background:var(--ink);color:var(--white);}
  .card--dark .num{color:var(--gold);}
  .card--dark p{color:rgba(255,255,255,.75);}
  .card--dark .go{color:var(--white);}
  .card--dark:hover .go{border-bottom-color:var(--white);}

  /* demo-material notice under the samples */
  .demo-note{
    margin-top:22px;
    display:flex;gap:12px;align-items:flex-start;
    font-size:14.5px;line-height:1.55;color:var(--ink-soft);
    border-left:3px solid var(--gold);
    padding:4px 0 4px 16px;
    max-width:78ch;
  }
  .demo-note b{color:var(--ink);font-weight:600;}

  /* ---------- steps ---------- */
  .steps{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(28px,4vw,52px);
  }
  .step-num{
    font-family:"Bricolage Grotesque",sans-serif;
    font-weight:800;font-size:15px;letter-spacing:.08em;
    color:var(--blue);
  }
  .steps h3{font-size:21px;margin:10px 0 8px;}
  .steps p{color:var(--ink-soft);font-size:16px;}
  .strip{
    margin-top:clamp(40px,5vw,64px);
    aspect-ratio:16/6;
    overflow:hidden;
    border-radius:4px;
  }
  .strip img{width:100%;height:100%;object-fit:cover;}

  /* ---------- promises (blue) ---------- */
  .promises{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(30px,4vw,56px);
  }
  .promises h3{font-size:23px;margin-bottom:8px;}
  .promises p{color:rgba(255,255,255,.82);font-size:16px;max-width:40ch;}
  .promises li{list-style:none;}
  .promises ul{margin:0;padding:0;display:contents;}

  /* ---------- study hub ---------- */
  .posts{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(28px,3.5vw,44px);
  }
  .post{text-decoration:none;display:block;}
  .post-img{aspect-ratio:3/2;overflow:hidden;border-radius:4px;background:var(--stone);}
  .post-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
  .post:hover .post-img img{transform:scale(1.03);}
  .post h3{font-size:20px;margin:18px 0 8px;max-width:22ch;}
  .post p{color:var(--ink-soft);font-size:15.5px;}
  .post-more{margin-top:14px;font-size:15px;font-weight:600;color:var(--blue);}

  /* ---------- about ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(32px,5vw,72px);
    align-items:start;
  }
  .about-grid h2{font-size:clamp(28px,4.2vw,46px);max-width:17ch;}
  .about-body p + p{margin-top:16px;}
  .about-body p{color:var(--ink-soft);font-size:16.5px;max-width:56ch;}
  .about-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;}
  .about-points li{position:relative;padding-left:26px;font-size:16px;color:var(--ink-soft);}
  .about-points li::before{
    content:"";position:absolute;left:0;top:9px;
    width:9px;height:9px;border-radius:2px;background:var(--gold);
  }

  /* ---------- faq ---------- */
  .faq{max-width:820px;}
  .faq details{border-top:1px solid var(--line);}
  .faq details:last-of-type{border-bottom:1px solid var(--line);}
  .faq summary{
    cursor:pointer;list-style:none;
    padding:22px 40px 22px 0;
    font-weight:600;font-size:18px;
    position:relative;
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{
    content:"+";position:absolute;right:6px;top:19px;
    font-size:24px;font-weight:500;color:var(--ink-soft);
    transition:transform .25s var(--ease);
  }
  .faq details[open] summary::after{transform:rotate(45deg);}
  .faq-a{padding:0 0 24px;color:var(--ink-soft);max-width:66ch;}
  .faq-a ul{margin:10px 0 0;padding-left:20px;display:grid;gap:6px;}

  /* ---------- closing ---------- */
  .close-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:40px;align-items:end;}
  .close-grid h2{font-size:clamp(32px,5.2vw,60px);max-width:14ch;}
  .close-grid p{margin-top:20px;color:var(--ink-soft);max-width:44ch;}
  .close-actions{display:flex;flex-wrap:wrap;gap:12px;}

  /* ---------- footer ---------- */
  .footer{background:var(--ink);color:#D6D9DD;padding:64px 24px 40px;}
  .footer-grid{
    max-width:var(--container);margin:0 auto;
    display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.1fr;gap:32px;
  }
  .footer .brand{margin:0 0 14px;}
  .footer .wordmark{color:var(--white);}
  .footer .wordmark .w2{color:#7BA0FF;}
  .footer small{color:#9BA2AA;display:block;max-width:34ch;line-height:1.6;}
  .footer h4{
    font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    color:#9BA2AA;margin:0 0 14px;font-weight:600;
  }
  .footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
  .footer a{color:#D6D9DD;text-decoration:none;font-size:15px;}
  .footer a:hover{color:var(--white);}
  .footer .contact-line{font-size:15px;color:#9BA2AA;}
  .footer .contact-line b{color:#D6D9DD;font-weight:600;}
  .footer-base{
    max-width:var(--container);margin:48px auto 0;
    padding-top:24px;border-top:1px solid #262B31;
    font-size:13.5px;color:#9BA2AA;line-height:1.6;
    display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;
  }
  .footer-base span{max-width:70ch;}

  /* ---------- responsive ---------- */
  @media (max-width:1024px){
    .nav-inner{padding:11px 20px;gap:12px;position:relative;}
    .brand small{display:none;}
    .logo-mark{height:32px;}
    .wordmark{font-size:19px;}
    .burger{display:flex;}
    /* the panel is an overlay, so it can fade and slide without touching layout */
    .nav-links{
      position:absolute;left:0;right:0;top:100%;
      display:flex;flex-direction:column;gap:0;
      background:var(--white);
      border-bottom:1px solid var(--line);
      box-shadow:0 18px 30px -24px rgba(16,20,24,.6);
      padding:4px 24px 18px;
      opacity:0;
      visibility:hidden;
      transform:translateY(-10px);
      pointer-events:none;
      transition:opacity .24s var(--ease),transform .3s var(--ease),visibility 0s linear .3s;
    }
    .nav.open .nav-links{
      opacity:1;
      visibility:visible;
      transform:none;
      pointer-events:auto;
      transition:opacity .24s var(--ease),transform .3s var(--ease),visibility 0s;
    }
    .nav-links li{
      border-top:1px solid var(--line);
      opacity:0;
      transform:translateY(-7px);
      transition:opacity .3s var(--ease),transform .3s var(--ease);
    }
    .nav.open .nav-links li{opacity:1;transform:none;}
    .nav.open .nav-links li:nth-child(1){transition-delay:.04s;}
    .nav.open .nav-links li:nth-child(2){transition-delay:.07s;}
    .nav.open .nav-links li:nth-child(3){transition-delay:.10s;}
    .nav.open .nav-links li:nth-child(4){transition-delay:.13s;}
    .nav.open .nav-links li:nth-child(5){transition-delay:.16s;}
    .nav.open .nav-links li:nth-child(6){transition-delay:.19s;}
    .nav.open .nav-links li:nth-child(7){transition-delay:.22s;}
    .nav-links a{display:block;padding:15px 0;font-size:16.5px;color:var(--ink);}
    .nav-links a::after{display:none;}
    .btn--sm{padding:10px 15px;font-size:14.5px;}
    .lbl-lg{display:none;}
    .lbl-sm{display:inline;}
  }
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-figure{aspect-ratio:16/10;}
    .steps,.posts{grid-template-columns:1fr;}
    .promises{grid-template-columns:1fr;}
    .samplegrid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .about-grid{grid-template-columns:1fr;}
    .close-grid{grid-template-columns:1fr;align-items:start;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .strip{aspect-ratio:16/9;}
  }
  @media (max-width:640px){
    body{font-size:16px;}
    .nav-inner{gap:10px;padding:10px 18px;}
    .logo-mark{height:28px;}
    .wordmark{font-size:18px;}
    .burger{width:38px;height:34px;}
    .hero-sub{font-size:17px;}
    .steps p,.promises p,.about-body p{font-size:15.5px;}
    .faq summary{font-size:16.5px;}
    .samplegrid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .btn{width:100%;}
    .hero-actions .btn,.close-actions .btn{width:100%;}
    .nav .btn--sm{width:auto;}
  }

  /* ================= MOTION LAYER ================= */

  /* scroll progress rail */
  .progress{
    position:fixed;top:0;left:0;right:0;height:3px;
    background:var(--gold);
    transform:scaleX(0);transform-origin:0 50%;
    z-index:60;pointer-events:none;
  }

  /* reveal-on-scroll, only armed when JS is running */
  .js [data-anim]{opacity:0;transform:translateY(24px);will-change:opacity,transform;}
  .js [data-anim].in{
    opacity:1;transform:none;
    transition:opacity .75s var(--ease),transform .75s var(--ease);
    transition-delay:var(--d,0ms);
  }
  /* the wrapper stays unclipped so IntersectionObserver can still see it.
     Clipping the observed element itself gives it zero intersection area and
     it never reveals, so the clip lives on the image instead. */
  .js [data-anim="fig"]{opacity:1;transform:none;}
  .js [data-anim="fig"] img{clip-path:inset(0 0 100% 0);transform:scale(1.07);}
  .js [data-anim="fig"].in img{
    clip-path:inset(0 0 0 0);
    transform:scale(1);
    transition:clip-path .95s var(--ease),transform 1.5s var(--ease);
    transition-delay:var(--d,0ms);
  }

  /* nav link underline */
  .nav-links a{position:relative;}
  .nav-links a::after{
    content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;
    background:var(--ink);
    transform:scaleX(0);transform-origin:0 50%;
    transition:transform .28s var(--ease);
  }
  .nav-links a:hover::after{transform:scaleX(1);}

  /* buttons */
  .btn{transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;}
  .btn:hover{transform:translateY(-2px);}
  .btn--primary:hover{box-shadow:0 12px 26px -14px rgba(23,65,200,.85);}
  .btn--gold:hover{box-shadow:0 12px 26px -14px rgba(255,195,0,.9);}
  .btn:active{transform:translateY(0);}

  /* arrows */
  .arw{display:inline-block;transition:transform .25s var(--ease);}
  .card:hover .arw,.post:hover .arw,.go:hover .arw{transform:translateX(5px);}

  /* cards */
  .card{position:relative;transition:box-shadow .3s var(--ease),background-color .18s ease;}
  .card::after{
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
    background:var(--blue);
    transform:scaleY(0);transform-origin:50% 0;
    transition:transform .32s var(--ease);
  }
  .card--dark::after{background:var(--gold);}
  .card:hover{z-index:2;box-shadow:0 22px 44px -26px rgba(16,20,24,.55);}
  .card:hover::after{transform:scaleY(1);}

  /* steps */
  .step-num{display:inline-block;transition:transform .3s var(--ease);}
  .steps > div:hover .step-num{transform:translateY(-3px);}

  /* faq */
  .faq summary{transition:color .2s ease;}
  .faq summary:hover{color:var(--blue);}
  .faq details[open] .faq-a{animation:faqIn .38s var(--ease) both;}
  @keyframes faqIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

  /* footer links */
  .footer a{transition:color .2s ease,padding-left .2s var(--ease);}
  .footer ul a:hover{padding-left:4px;}

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{animation:none!important;transition:none!important;}
    .post:hover .post-img img{transform:none;}
    .js [data-anim]{opacity:1!important;transform:none!important;}
    .js [data-anim="fig"] img{clip-path:none!important;transform:none!important;}
    .js .mark{background-size:100% 100%!important;}
    .progress{display:none;}
    .nav-links li{opacity:1!important;transform:none!important;}
  }

  /* ============================================================
     WordPress additions
     Styles for pages the static mockup never had: policy pages,
     the blog, the contact form, search and pagination.
     ============================================================ */

  .screen-reader-text{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .skip-link:focus{
    position:fixed;top:12px;left:12px;z-index:200;width:auto;height:auto;
    clip:auto;margin:0;padding:12px 18px;background:var(--ink);color:var(--white);
    border-radius:2px;font-weight:600;
  }

  /* ---------- long-form reading column ---------- */
  .prose{max-width:760px;}
  .prose-title{
    font-family:"Bricolage Grotesque",Georgia,serif;
    font-weight:800;letter-spacing:-0.03em;line-height:1.05;
    font-size:clamp(34px,4.4vw,54px);margin:10px 0 0;
  }
  .prose-meta{margin:14px 0 0;color:var(--ink-soft);font-size:15px;}
  .prose-figure{margin:34px 0 0;}
  .prose-figure img{width:100%;height:auto;display:block;}
  .prose-body{margin-top:30px;font-size:17.5px;line-height:1.72;color:var(--ink-soft);}
  .prose-body > *:first-child{margin-top:0;}
  .prose-body h2{
    font-family:"Bricolage Grotesque",Georgia,serif;
    color:var(--ink);font-weight:700;letter-spacing:-0.02em;
    font-size:clamp(24px,2.6vw,31px);line-height:1.2;margin:44px 0 12px;
  }
  .prose-body h3{
    color:var(--ink);font-weight:600;font-size:19px;margin:32px 0 8px;
  }
  .prose-body p{margin:0 0 18px;}
  .prose-body ul,.prose-body ol{margin:0 0 20px;padding-left:22px;}
  .prose-body li{margin:0 0 9px;}
  .prose-body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
  .prose-body a:hover{text-decoration-thickness:2px;}
  .prose-body strong{color:var(--ink);font-weight:600;}
  .prose-body blockquote{
    margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--gold);
    color:var(--ink);font-size:19px;
  }
  .prose-body img{max-width:100%;height:auto;}
  .prose-body table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:16px;}
  .prose-body th,.prose-body td{
    border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;
  }
  .prose-body th{background:var(--stone);color:var(--ink);font-weight:600;}
  .prose-body hr{border:0;border-top:1px solid var(--line);margin:34px 0;}

  /* A clear marker for text the client still has to write. */
  .prose-body .gv-placeholder{
    border:1px dashed #C9A227;background:#FFF9E6;color:#6B5200;
    padding:14px 16px;margin:0 0 22px;font-size:15.5px;line-height:1.6;
  }
  .prose-body .gv-placeholder strong{color:#6B5200;}

  /* ---------- contact form ---------- */
  .form-grid{
    display:grid;grid-template-columns:1fr 1.15fr;gap:1px;
    background:var(--line);border:1px solid var(--line);margin-top:8px;
  }
  .form-aside,.form-body{background:var(--white);padding:clamp(24px,3vw,38px);}
  .form-aside{color:var(--ink-soft);font-size:16.5px;line-height:1.66;}
  .form-aside h3{color:var(--ink);font-size:18px;margin:0 0 10px;font-weight:600;}
  .form-aside p{margin:0 0 16px;}
  .form-aside a{color:var(--blue);}

  .form-body input[type=text],
  .form-body input[type=email],
  .form-body input[type=tel],
  .form-body input[type=url],
  .form-body input[type=number],
  .form-body input[type=date],
  .form-body select,
  .form-body textarea{
    width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:2px;
    background:var(--white);color:var(--ink);font:inherit;font-size:16px;
    transition:border-color .18s var(--ease);
  }
  .form-body textarea{min-height:140px;resize:vertical;}
  .form-body input:focus,.form-body select:focus,.form-body textarea:focus{
    outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,65,200,.12);
  }
  .form-body label{
    display:block;margin:0 0 6px;font-size:14.5px;font-weight:600;color:var(--ink);
  }
  .form-body button[type=submit],
  .form-body input[type=submit]{
    background:var(--blue);color:var(--white);border:1px solid var(--blue);
    padding:14px 26px;border-radius:2px;font:inherit;font-weight:600;cursor:pointer;
    transition:background .18s var(--ease);
  }
  .form-body button[type=submit]:hover,
  .form-body input[type=submit]:hover{background:#0F31A0;}

  @media (max-width:860px){
    .form-grid{grid-template-columns:1fr;}
  }

  /* ---------- search ---------- */
  .search-form{display:flex;gap:10px;margin:22px 0 0;max-width:460px;}
  .search-form label{flex:1;}
  .search-form .search-field{
    width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:2px;
    font:inherit;font-size:16px;
  }
  .search-form .search-field:focus{outline:none;border-color:var(--blue);}
  .search-form .search-submit{
    background:var(--ink);color:var(--white);border:0;padding:12px 20px;
    border-radius:2px;font:inherit;font-weight:600;cursor:pointer;
  }

  /* ---------- pagination ---------- */
  .pagination{margin-top:52px;}
  .pagination .nav-links{
    display:flex;flex-wrap:wrap;gap:8px;align-items:center;
    position:static;background:none;border:0;box-shadow:none;padding:0;
    opacity:1;visibility:visible;transform:none;pointer-events:auto;
  }
  .pagination .page-numbers{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);
    color:var(--ink);text-decoration:none;font-weight:500;font-size:15.5px;
    transition:border-color .18s var(--ease),color .18s var(--ease);
  }
  .pagination .page-numbers:hover{border-color:var(--ink);}
  .pagination .page-numbers.current{
    background:var(--ink);border-color:var(--ink);color:var(--white);
  }

  /* Comments are not used on this site, but a stray reply form should not
     inherit the mobile menu styles above. */
  .comment-respond{max-width:760px;margin-top:40px;}

  /* ---------- hero without a picture ---------- */
  .hero-grid--solo{grid-template-columns:minmax(0,1fr);}
  .hero-grid--solo h1{max-width:16ch;}
  .hero-grid--solo .hero-sub{max-width:60ch;}

  /* ---------- contact panel ---------- */
  .form-aside h3{
    font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
    letter-spacing:-0.02em;font-weight:700;
    margin:0 0 10px;
  }
  .form-aside h3 + p{margin-top:0;}
  .form-aside > *:first-child{margin-top:0;}
  .form-aside p:last-child{margin-bottom:0;}
  .form-aside a{font-weight:600;text-decoration:none;border-bottom:2px solid var(--gold);}
  .form-aside a:hover{border-bottom-color:var(--blue);}

  /* Fluent Forms ships its own look, so pull it back to the site style. */
  .form-body .fluentform{font-family:inherit;}
  .form-body .ff-el-group{margin-bottom:20px;}
  .form-body .ff-el-input--label label,
  .form-body .ff-el-form-check-label{
    font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);
    margin:0 0 7px;line-height:1.4;
  }
  .form-body .ff-el-is-required.asterisk-right label:after{color:var(--blue);}
  .form-body .ff-el-input--content input,
  .form-body .ff-el-input--content select,
  .form-body .ff-el-input--content textarea{
    width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:2px;
    background:var(--white);color:var(--ink);font-family:inherit;font-size:16px;
    line-height:1.5;box-shadow:none;height:auto;
    transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
  }
  .form-body .ff-el-input--content textarea{min-height:150px;resize:vertical;}
  .form-body .ff-el-input--content input:focus,
  .form-body .ff-el-input--content select:focus,
  .form-body .ff-el-input--content textarea:focus{
    outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,65,200,.12);
  }
  .form-body .ff-el-form-check{display:flex;align-items:flex-start;gap:10px;}
  .form-body .ff-el-form-check input[type=checkbox]{
    width:18px;height:18px;margin:2px 0 0;accent-color:var(--blue);flex:none;
  }
  .form-body .ff-el-form-check-label{margin:0;font-weight:500;color:var(--ink-soft);}
  .form-body .ff-el-help-message{font-size:13.5px;color:var(--ink-soft);margin-top:6px;}
  .form-body .ff-el-form-control.ff-el-is-error{border-color:#C0392B;}
  .form-body .text-danger,.form-body .error{font-size:13.5px;color:#C0392B;}
  .form-body .ff-btn-submit,
  .form-body .ff_submit_btn_wrapper button{
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--blue);color:var(--white);border:1.5px solid var(--blue);
    padding:15px 30px;border-radius:999px;
    font-family:inherit;font-size:16px;font-weight:600;line-height:1;
    cursor:pointer;box-shadow:none;
    transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease;
  }
  .form-body .ff-btn-submit:hover,
  .form-body .ff_submit_btn_wrapper button:hover{
    background:#0F31A0;transform:translateY(-2px);
    box-shadow:0 12px 26px -14px rgba(23,65,200,.85);
  }
  .form-body .ff-btn-submit:active{transform:translateY(0);}
  .form-body .ff-message-success{
    border:1px solid var(--line);border-left:3px solid var(--blue);
    background:var(--stone);padding:18px 20px;color:var(--ink);
  }

  /* ---------- floating WhatsApp button ---------- */
  .wa-float{
    position:fixed;right:22px;bottom:22px;z-index:60;
    display:inline-flex;align-items:center;gap:10px;
    padding:13px 20px 13px 16px;
    background:#25D366;color:#0B2417;
    border-radius:999px;text-decoration:none;
    font-weight:600;font-size:15.5px;line-height:1;
    box-shadow:0 14px 30px -12px rgba(16,20,24,.55);
    transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s ease;
  }
  .wa-float svg{width:22px;height:22px;flex:none;fill:currentColor;}
  .wa-float:hover{
    background:#1EBE5A;transform:translateY(-2px);
    box-shadow:0 18px 36px -12px rgba(16,20,24,.6);
  }
  .wa-float:active{transform:translateY(0);}

  /* The open mobile menu owns the screen, so get the button out of its way. */
  body:has(.nav.open) .wa-float{opacity:0;pointer-events:none;}

  @media (max-width:640px){
    .wa-float{right:16px;bottom:16px;padding:14px;gap:0;}
    .wa-float .wa-float-text{
      position:absolute;width:1px;height:1px;overflow:hidden;
      clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
    }
  }

  @media (prefers-reduced-motion:reduce){
    .wa-float,.form-body .ff-btn-submit{transition:none;}
    .wa-float:hover,.form-body .ff-btn-submit:hover{transform:none;}
  }

  /* ---------- current page in the nav ---------- */
  .nav-links .current-menu-item > a,
  .nav-links .current_page_item > a,
  .nav-links .current-menu-ancestor > a,
  .nav-links a.is-current{
    color:var(--ink);font-weight:600;
    border-bottom:2px solid var(--gold);padding-bottom:2px;
  }

  /* ---------- blog filters ---------- */
  .blog-filters{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:18px 24px;
    margin:0 0 clamp(32px,4vw,48px);
    padding-bottom:22px;
    border-bottom:1px solid var(--line);
  }
  .chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
  .chip{
    display:inline-flex;align-items:center;gap:7px;
    padding:9px 16px;border:1px solid var(--line);border-radius:999px;
    font-size:14.5px;font-weight:500;color:var(--ink-soft);text-decoration:none;
    transition:border-color .18s ease,color .18s ease,background-color .18s ease;
  }
  .chip:hover{border-color:var(--ink);color:var(--ink);}
  .chip--on{background:var(--ink);border-color:var(--ink);color:var(--white);}
  .chip--on:hover{color:var(--white);}
  .chip-n{
    font-size:12px;font-weight:600;color:var(--ink-soft);
    background:var(--stone);border-radius:999px;padding:1px 7px;
  }
  .chip--on .chip-n{background:rgba(255,255,255,.18);color:var(--white);}
  .blog-filters .search-form{margin:0;max-width:330px;flex:1 1 240px;}
  .blog-filters .search-field,
  .blog-filters .search-submit{border-radius:999px;}
  .blog-filters .search-field{padding:11px 18px;font-size:15px;}
  .blog-filters .search-submit{padding:11px 22px;font-size:15px;}

  @media (max-width:700px){
    .blog-filters{flex-direction:column;align-items:stretch;}
    .blog-filters .search-form{max-width:none;}
  }

  /* ---------- work samples ---------- */
  .worklist{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .work{
    margin:0;
    background:var(--white);
    display:flex;flex-direction:column;
  }
  .work-shot{
    position:relative;
    overflow:hidden;
    background:var(--stone);
    border-bottom:1px solid var(--line);
  }
  .work-shot img{width:100%;height:auto;display:block;}

  /* Discourages casual reuse. It is not protection: the file underneath is
     untouched, so nothing private should ever be published here. */
  .work-shot--marked::after{
    content:attr(data-mark);
    position:absolute;inset:0;
    display:grid;place-items:center;
    font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
    font-weight:800;letter-spacing:.1em;
    font-size:clamp(20px,3.4vw,38px);
    color:rgba(16,20,24,.14);
    text-shadow:0 1px 0 rgba(255,255,255,.35);
    transform:rotate(-24deg);
    pointer-events:none;
    user-select:none;
  }
  .work figcaption{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1;}
  .work figcaption h3{font-size:19px;margin-bottom:8px;}
  .work figcaption p{font-size:14.5px;line-height:1.55;color:var(--ink-soft);}
  .work figcaption .go{
    align-self:flex-start;margin-top:auto;padding-top:18px;
    font-size:13.5px;font-weight:600;text-decoration:none;
    border-bottom:2px solid var(--gold);padding-bottom:2px;
  }
  .work:hover figcaption .go{border-bottom-color:var(--blue);}

  /* ---------- testimonials rail ---------- */
  /* A row that fills the width while there are few and scrolls itself once
     there are more. Cards are spaced with a uniform right margin rather than
     gap, so duplicating the set doubles the width exactly and the loop can
     reset seamlessly. */
  .quotes-rail{position:relative;}

  .rail-nav{
    display:none;
    justify-content:flex-end;gap:8px;
    margin:-10px 0 18px;
  }
  .has-overflow .rail-nav{display:flex;}
  .rail-btn{
    width:44px;height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    border:1.5px solid var(--line);border-radius:999px;
    background:var(--white);color:var(--ink);
    font-size:17px;line-height:1;
    cursor:pointer;
    transition:border-color .18s ease,background-color .18s ease,color .18s ease,opacity .18s ease;
  }
  .rail-btn:hover:not(:disabled){border-color:var(--ink);background:var(--ink);color:var(--white);}
  .rail-btn:disabled{opacity:.35;cursor:default;}
  .band--blue .rail-btn{background:transparent;border-color:rgba(255,255,255,.4);color:var(--white);}
  .band--blue .rail-btn:hover:not(:disabled){border-color:var(--white);background:var(--white);color:var(--blue);}

  .quotes{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    /* Room for the hover lift and its shadow. */
    padding:6px 0 20px;
    /* The peeking card is the affordance, so the bar itself can go. */
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .quotes::-webkit-scrollbar{display:none;}
  .quotes.is-looping{scroll-snap-type:none;scroll-behavior:auto;}
  .quotes:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:10px;}

  .quote{
    /* Grows to fill the row when there is room, holds its width when there is
       not, which is what turns the row into a rail. */
    flex:1 0 clamp(276px,36%,384px);
    scroll-snap-align:start;
    margin:0 22px 0 0;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:10px;
    padding:32px 30px 26px;
    display:flex;flex-direction:column;
    transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .18s ease;
  }
  .quote:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 46px -26px rgba(16,20,24,.55);
    border-color:#D6D6CE;
  }

  .quote blockquote{
    margin:0 0 24px;
    font-size:18.5px;line-height:1.58;
    color:var(--ink);
    letter-spacing:-0.005em;
  }
  .quote blockquote::before{
    content:"\201C";
    display:block;
    font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
    font-weight:800;
    font-size:66px;line-height:.72;
    color:var(--gold);
    margin-bottom:14px;
  }

  .quote figcaption{
    margin-top:auto;
    padding-top:20px;
    border-top:1px solid var(--line);
    display:flex;align-items:center;gap:13px;
  }
  .quote-avatar{
    width:44px;height:44px;flex:none;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:999px;
    background:var(--blue);color:var(--white);
    font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
    font-weight:700;font-size:15px;letter-spacing:.03em;
  }
  .quote-who b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.3;}
  .quote-who span{display:block;font-size:14px;color:var(--ink-soft);line-height:1.4;}

  /* On the blue band the cards invert. */
  .band--blue .quote{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);}
  .band--blue .quote:hover{border-color:rgba(255,255,255,.45);box-shadow:none;}
  .band--blue .quote blockquote,
  .band--blue .quote-who b{color:var(--white);}
  .band--blue .quote figcaption{border-top-color:rgba(255,255,255,.22);}
  .band--blue .quote-who span{color:rgba(255,255,255,.75);}
  .band--blue .quote-avatar{background:var(--gold);color:var(--ink);}

  @media (max-width:700px){
    .quote{flex-basis:80%;margin-right:16px;padding:28px 24px 22px;}
    .quote blockquote{font-size:17.5px;}
    .quote blockquote::before{font-size:56px;}
    .rail-nav{display:none !important;} /* swiping is the native gesture here */
  }
  @media (max-width:380px){
    .quote{flex-basis:88%;}
  }
  @media (prefers-reduced-motion:reduce){
    .quotes{scroll-behavior:auto;}
    .quote,.rail-btn{transition:none;}
    .quote:hover{transform:none;}
  }