/* shared styles for agenciy replica subpages */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* ---- container / gutter system ----------------------------------------
   One rule for every page edge: content is capped at --maxw and never sits
   closer to the viewport edge than --gutter. The nav is full-bleed but its
   contents align to the same invisible column, so the logo lines up with the
   copy underneath it at every width. */
@media(min-width:600px){}
@media(min-width:900px){}
@media(min-width:1280px){}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.center{text-align:center}
.sec{padding-block:100px}
h2{font-size:clamp(36px,4.6vw,64px);font-weight:600;letter-spacing:-1px;line-height:1.1}
.serif{font-family:var(--serif);font-style:italic;font-weight:500}
.dim{color:var(--dim)}
.sub{color:#b5b5b5;font-size:17px;line-height:1.55;font-weight:300}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:#161616;border:1px solid var(--line2);font-family:var(--ui);font-size:14px;color:#ddd}
.pill svg{width:16px;height:16px;stroke:#ddd;fill:none;stroke-width:1.6}
.btn-pill{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:999px;background:#141414;border:1px solid var(--line2);font-size:15px;font-weight:500;cursor:pointer;color:var(--fg);transition:background .3s}
.btn-pill:hover{background:#222}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(46px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.in .rv,.rv.in{opacity:1;transform:none}
.in .rv:nth-child(2){transition-delay:.08s}.in .rv:nth-child(3){transition-delay:.16s}
.in .rv:nth-child(4){transition-delay:.24s}.in .rv:nth-child(5){transition-delay:.32s}
.rise{opacity:0;transform:translateY(40px);animation:rise .9s cubic-bezier(.22,1,.36,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* nav */
nav.top{display:flex;justify-content:space-between;align-items:center;
  padding-block:16px;padding-inline:max(var(--gutter),calc((100% - var(--maxw))/2 + var(--gutter)));position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(5,5,5,.65);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid var(--line2)}
.mnav{display:none;background:none;border:none;cursor:pointer;width:34px;padding:4px 0}
.mnav span{display:block;height:2px;background:var(--fg);margin:6px 0;border-radius:2px;transition:transform .3s}
nav.top.open .mnav span:first-child{transform:translateY(4px) rotate(45deg)}
nav.top.open .mnav span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media(max-width:760px){
  .mnav{display:block}
  nav.top .nlinks{display:none}
  
}
nav.top .logo img{height:34px}
.burger{width:34px;cursor:pointer;background:none;border:none}
.burger span{display:block;height:2px;background:var(--fg);margin:7px 0;border-radius:2px}
.burger span:last-child{width:70%;margin-left:auto}

/* subpage hero */
.phero{position:relative;min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden;
  background:url('wave-hero.webp') center 70%/cover no-repeat #050505;border-bottom:1px solid var(--line2)}
.phero h1{margin-top:20vh;text-align:center;font-weight:500;line-height:1.02;font-size:clamp(48px,7vw,96px);letter-spacing:-2px;z-index:2}
.phero h1 .serif{display:block;font-size:clamp(38px,5.4vw,72px)}
.phero .helmet{position:absolute;left:50%;bottom:-16vh;transform:translateX(-50%);width:min(56vw,860px);z-index:1;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 45%,#000 55%,transparent 78%)}
.phero .ticker{position:absolute;bottom:8vh;left:0;right:0;overflow:hidden;z-index:2;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
.phero .track{display:flex;gap:80px;width:max-content;animation:scroll 22s linear infinite;opacity:.7}
.phero .track span{font-size:26px;white-space:nowrap;color:#cfcfcf}
.f-serif{font-family:var(--serif);font-style:italic}
.f-bold{font-weight:600;letter-spacing:-1px}
.f-light{font-weight:300}
@keyframes scroll{to{transform:translateX(-50%)}}
.phero .chev{position:absolute;bottom:18vh;left:50%;transform:translateX(-50%);width:44px;height:44px;z-index:2;stroke:#fff;fill:none;stroke-width:1.6;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,-3px)}50%{transform:translate(-50%,4px)}}

/* faq */
.faq{max-width:880px;margin:70px auto 0}
.fitem{border-bottom:1px solid var(--line2);padding:26px 0}
.fitem summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:20px;font-weight:600;list-style:none}
.fitem summary::-webkit-details-marker{display:none}
.fitem .pm{flex:0 0 40px;height:40px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:300;font-size:20px;transition:transform .3s}
.fitem[open] .pm{transform:rotate(45deg)}
.fitem p{margin-top:18px;color:#b5b5b5;font-weight:300;line-height:1.6;max-width:640px}

/* talk + form */
.talk{background:url('bg-dots-2.png') center/cover #0a0a0a;border-radius:24px;padding:120px 56px 56px;margin-bottom:26px}
.talk h2{font-weight:600}
.formcard{background:var(--panel);border:1px solid var(--line2);border-radius:24px;padding:56px}
.formcard h3{font-size:28px;font-weight:600;margin-bottom:40px}
.formcard label{display:block;font-size:14px;font-weight:600;margin:26px 0 10px}
.formcard input,.formcard textarea,.formcard select{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line2);color:var(--fg);font-family:var(--sans);font-size:15px;padding:10px 0;outline:none;resize:vertical}
.formcard select{background-color:#141414;border:1px solid var(--line2);border-radius:8px;padding:14px;
  appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px}
.formcard input:focus,.formcard textarea:focus{border-color:#888}
.send{display:block;width:100%;padding:18px;border-radius:999px;margin-top:44px;background:var(--goldgrad);border:none;color:#111;font-weight:600;font-size:15px;cursor:pointer}
.send:hover{filter:brightness(.92)}

/* footer */
footer{padding:90px 0 0}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.fmini{color:#9a9a9a;font-size:14px;margin-bottom:14px}
.finfo p{font-size:15px;line-height:1.6;margin-bottom:30px}
.flinks{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:12px 28px;align-items:start}
.flinks .col a{display:block;font-size:clamp(22px,2.2vw,32px);font-weight:600;margin-bottom:18px;color:#e5e5e5;transition:color .3s}
.flinks .col a:hover{color:#888}
.fword{margin-top:70px;overflow:hidden;text-align:center}
.fword span{font-size:clamp(120px,22vw,330px);line-height:.8;letter-spacing:-.02em;display:inline-block;
  background:linear-gradient(180deg,#8a8a8a,#1c1c1c 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.fword .fs{font-family:var(--serif);font-style:italic}
.fbar{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line2);padding:22px 0;color:#9a9a9a;font-size:13.5px;font-family:var(--ui)}
.fbar b{color:#ddd;font-weight:600}
.fbar a{display:inline-flex;align-items:center;gap:10px;color:#ddd}
.fbar .up{width:36px;height:36px;border-radius:50%;background:#1a1a1a;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center}
.fbar svg{width:16px;height:16px;stroke:#ddd;fill:none;stroke-width:2}

@media(max-width:960px){
  .fcols{grid-template-columns:1fr}
  nav.top{padding-block:22px}
}

/* top-nav wordmark + links (Platinova pages) */
nav.top .wm{font-size:26px;font-weight:600;letter-spacing:-1px;background:linear-gradient(180deg,#f2f2f2,#8a8a8a);-webkit-background-clip:text;background-clip:text;color:transparent}
nav.top .wm .fs{font-family:var(--serif);font-style:italic;font-weight:500}
.nlinks{display:flex;gap:26px;font-family:var(--ui);font-size:14.5px}
.nlinks a{color:#b5b5b5;transition:color .3s}
.nlinks a:hover,.nlinks a[aria-current="page"]{color:var(--fg)}
@media(max-width:760px){.nlinks{gap:16px;font-size:13px;flex-wrap:wrap;justify-content:flex-end}}

/* ============================================================
   RESPONSIVE — down to 360px
   The design is unchanged: same fonts, colours, easing, motion.
   Only box sizes shrink, via clamp() and these queries.
   ============================================================ */

@media(max-width:960px){
  .sec{padding-block:80px}
  .talk{padding:84px 32px 40px}
  .formcard{padding:40px 30px}
  footer{padding:70px 0 0}
  .faq{margin-top:50px}
}

@media(max-width:760px){
  .sec{padding-block:58px}
  h2{font-size:clamp(28px,5.6vw,36px)}
  .sub{font-size:16px}
  .btn-pill{padding:14px 22px;font-size:14.5px}
  .pill{padding:9px 15px;font-size:13px}

  /* nav rejoins the flow — absolutely positioned, its wrapped rows
     land on top of the hero headline once the links go to 2–3 lines */
  nav.top{position:relative;padding-block:18px}
  nav.top .logo img{height:30px}
  nav.top .wm{font-size:22px}

  /* subpage hero — the nav no longer overlays it, so the 20vh offset goes */
  .phero{min-height:68vh}
  .phero h1{margin-top:5vh;padding:0 20px;font-size:clamp(34px,9.4vw,48px);letter-spacing:-1px}
  .phero h1 .serif{font-size:clamp(27px,7.4vw,38px)}
  .phero .helmet{width:min(80vw,360px);bottom:-12vh}
  .phero .chev{bottom:14vh;width:36px;height:36px}
  .phero .ticker{bottom:5vh}
  .phero .track{gap:44px}
  .phero .track span{font-size:20px}

  /* faq */
  .faq{margin-top:40px}
  .fitem{padding:20px 0}
  .fitem summary{font-size:17px;gap:16px}
  .fitem p{margin-top:14px;font-size:15.5px}

  /* let's talk + form */
  .talk{padding:60px 22px 32px;border-radius:18px}
  .formcard{padding:30px 22px;border-radius:18px}
  .formcard h3{font-size:23px;margin-bottom:26px}
  .formcard label{margin:22px 0 8px}
  .send{padding:16px;margin-top:32px}

  /* footer */
  footer{padding:56px 0 0}
  .fcols{gap:38px}
  .finfo p{margin-bottom:22px;overflow-wrap:anywhere}
  .flinks{grid-template-columns:auto 1fr;gap:4px 20px}
  .flinks .col a{font-size:19px;margin-bottom:10px;padding:6px 0}
  .fword{margin-top:44px}
  .fword span{font-size:clamp(42px,15.5vw,120px)}
  .fbar{flex-wrap:wrap;gap:12px;padding:18px 0;font-size:12.5px}
  .fbar .up{width:40px;height:40px}
}

/* touch targets — last so it wins over the .nlinks rules above and in
   platinova.css (neither sets these properties) */
@media(max-width:860px){
  .nlinks a{display:inline-flex;align-items:center;min-height:40px}
}

/* ---- mobile menu: full-screen overlay (Mugen pattern) ---- */
.mmenu{position:fixed;inset:0;z-index:70;background:rgba(5,5,5,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;padding:22px 24px 30px;opacity:0;pointer-events:none;transition:opacity .35s ease}
.mmenu.open{opacity:1;pointer-events:auto}
.mm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}
.mm-lbl{font-family:var(--ui);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.mm-x{background:none;border:none;cursor:pointer;width:34px;height:34px;stroke:#f2f2f2;stroke-width:1.6;fill:none}
.mm-links{display:flex;flex-direction:column}
.mm-links a{font-size:32px;font-weight:600;letter-spacing:-1px;line-height:1;padding:11px 0;color:var(--fg);
  opacity:0;transform:translateX(-20px);transition:opacity .5s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.mmenu.open .mm-links a{opacity:1;transform:none}
.mm-links a i{font-style:normal;font-weight:500;font-size:20px;color:var(--dim);margin-left:10px;font-family:var(--ui);letter-spacing:0}
.mm-links a[aria-current="page"]{color:#b5b5b5}
.mm-hr{border:none;border-top:1px solid var(--line2);margin:30px 0}
.mm-talk .mm-lbl{display:block;margin-bottom:14px}
.mm-mail{font-size:24px;font-weight:500;letter-spacing:-.5px;color:#e5e5e5;border-bottom:1px solid var(--line);padding-bottom:6px;display:inline-flex;gap:10px;align-items:baseline}
.mm-mail i{font-style:normal;color:var(--dim)}
.mm-loc{font-family:var(--ui);font-size:13.5px;color:#9a9a9a;margin:26px 0 0}
.mm-loc b{color:#e0e0e0;font-weight:600}
.mm-soc{margin-top:34px}
.mm-soc .mm-lbl{display:block;margin-bottom:16px}
.mm-soc .row{display:flex;gap:22px}
.mm-soc a{width:22px;height:22px;display:inline-flex}
.mm-soc svg{width:22px;height:22px;fill:#cfcfcf}
.mm-bot{margin-top:auto;padding-top:26px;border-top:1px solid var(--line2);font-family:var(--ui);font-size:12.5px;color:var(--dim)}
@media(min-width:761px){.mmenu{display:none}}

/* accessibility: visible keyboard focus + reduced motion */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid #cfcfcf;outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion: reduce){
  .rise,.rv{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
  .track,.chev,.scroll-btn svg,.scrollcue .p{animation:none!important}
  html{scroll-behavior:auto}
}

/* golden accent: heading serif accents render in gradient gold */
h1 .serif,h2 .serif,.phero h1 .serif,.ahead h1 .serif,.ahead h2 .serif{
  background:var(--goldtext);-webkit-background-clip:text;background-clip:text;color:transparent}
.pill svg{stroke:var(--goldink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:#E4B15C}