/* ==========================================================================
   Mekano Design — home page
   Built against "Mekano Design - Home page" @ 1440 x 7196.
   Self-hosted Poppins first so the whole page is one CSS request.
   ========================================================================== */

@font-face{font-family:Poppins;src:url(../fonts/poppins-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/poppins-500.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/poppins-600.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/poppins-700.woff2)format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/poppins-800.woff2)format("woff2");font-weight:800;font-display:swap}

/* ------------------------------- reset --------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--surface);
     font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,figure,blockquote,ul{margin:0}
ul{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}

/* line-drawing icons share one stroke treatment */
svg[viewBox]{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------ primitives ------------------------------ */
.shell{width:min(var(--container),calc(100% - 48px));margin-inline:auto}
.muted{color:var(--muted)}
.gold{color:var(--gold)}

/* Tracking is solved from measured ink widths in the design, not eyeballed:
   H1 "FULL-SERVICE DESIGN & BUILD." = 865.0px @64px  -> -.060em
   H2 "MORE THAN DESIGNERS."         = 651.5px @56px  -> -.015em          */
.h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:var(--w-bold);
    text-transform:uppercase;letter-spacing:-.060em}
.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--w-bold);
    text-transform:uppercase;letter-spacing:-.015em}
.h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--w-medium);letter-spacing:-.01em}
.body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
.lead{font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--muted)}
.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
         font-weight:var(--w-regular);color:#fff}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
     height:var(--btn-h);padding:0 32px;border-radius:var(--r-pill);
     font-size:var(--fs-body);font-weight:var(--w-medium);white-space:nowrap;
     transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:#d99c1d}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#000}
.btn--ghost-light{border:1px solid rgba(255,255,255,.45);color:#fff}
.btn--ghost-light:hover{background:rgba(255,255,255,.1)}
.i-arrow{width:20px;height:20px}

.circ{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
      background:var(--ink);color:#fff;flex:none;transition:transform var(--dur) var(--ease)}
.circ svg{width:20px;height:20px}
.circ--dark{background:var(--ink);width:40px;height:40px}
.linkarrow{display:inline-flex;align-items:center;gap:14px;font-weight:var(--w-medium);color:var(--ink)}
.linkarrow:hover .circ{transform:translate(2px,-2px)}
.linkarrow--sm{font-size:16px}
.linkarrow--sm .circ{width:36px;height:36px}
.linkarrow--sm .circ svg{width:16px;height:16px}

.tag{display:inline-flex;align-items:center;height:48px;padding:0 26px;border-radius:var(--r-pill);
     border:1px solid var(--line);font-size:var(--fs-body);white-space:nowrap}
.tag--solid{background:var(--ink);color:#fff;border-color:var(--ink)}

/* =========================== HEADER + HERO ============================== */
/* The hero image straddles the dark/light boundary: dark runs to y838 in the
   design, the image bottom sits at y1152 — 314px of it over white. */
.hero-wrap{background:linear-gradient(var(--ink) 0 838px,var(--surface) 838px);overflow:hidden}

.site-header{height:136px}
.shell--header{display:flex;align-items:center;height:100%;gap:40px;padding-inline:24px}
.logo{font-size:26px;font-weight:var(--w-regular);letter-spacing:.06em;color:#fff}
.nav{display:flex;gap:61px;margin-inline:auto;font-size:var(--fs-body)}
.shell--header .btn{height:52px;padding:0 24px;font-size:16px}
.nav a{color:rgba(255,255,255,.62);transition:color var(--dur) var(--ease)}
.nav a:hover,.nav a.is-active{color:#fff;font-weight:var(--w-medium)}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px}
.burger span{display:block;height:2px;background:#fff;border-radius:2px}

/* right paragraph begins at x1018 in the frame: 64 + 954 */
.hero__top{display:grid;grid-template-columns:954px 358px;gap:0;padding-top:62px;align-items:start}
.hero__lead .h1{color:#fff;margin-top:18px}
.hero__intro{font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:#fff}
.hero__cta{display:flex;gap:26px;margin-top:60px}
.hero__media{position:relative;margin-top:59px}
.hero__slides{border-radius:var(--r-lg);overflow:hidden;height:584px}
.hero__slides img{width:100%;height:100%;object-fit:cover}
.dots{position:absolute;left:36px;bottom:34px;display:flex;gap:10px}
.dot{width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.85);
     transition:background var(--dur) var(--ease)}
.dot.is-on{background:var(--gold)}

/* ============================== LOGO STRIP ============================== */
.clients{padding:86px 0 0}
.clients__title{text-align:center;font-size:20px;color:var(--muted)}
.marquee{margin-top:60px;overflow:hidden;
         -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
                 mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;gap:24px;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.chip{display:grid;place-items:center;width:246px;height:68px;flex:none;
      border:1px solid var(--line);border-radius:var(--r-pill);background:#fff}
.chip img{max-height:44px;max-width:80%;width:auto;object-fit:contain}

/* ================================ ABOUT ================================= */
.about{padding-top:118px}
/* image begins at x770 in the frame: 64 + 706 */
.about__grid{display:grid;grid-template-columns:706px 606px;gap:0;align-items:start}
.about__copy .lead{margin-top:60px;max-width:620px}
.about__media{position:relative;border-radius:var(--r-lg);overflow:hidden;height:555px}
.about__media img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:28px;right:20px;height:44px;display:grid;place-items:center;
       padding:0 24px;border-radius:var(--r-pill);font-size:var(--fs-body);color:#fff;
       background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
       -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:36px}
.stat{padding-left:34px;border-left:1px solid var(--line)}
.stats .stat:first-child{border-left:0;padding-left:0}
/* "150+" measures 112.5px wide in the frame */
.stat__n{font-size:var(--fs-stat);line-height:1.1;font-weight:var(--w-medium);letter-spacing:-.05em}
.stat__n span{font-size:32px;font-weight:var(--w-regular)}
.stat__l{margin-top:14px;font-size:var(--fs-body);color:var(--muted)}

/* ============================ WHY CHOOSE US ============================= */
.why{padding-top:150px}
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:104px}
.wcard{display:flex;flex-direction:column;justify-content:space-between;gap:120px;
       min-height:494px;padding:38px;border-radius:var(--r-lg);background:var(--surface-2)}
.wicon{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
       background:var(--gold);color:#fff}
.wicon svg{width:26px;height:26px}
.wcard .h3{max-width:11ch}
.wcard .body{margin-top:22px}

/* ============================== PROJECTS ================================ */
.projects{padding-top:71px}
.acc{margin-top:60px;border:1px solid var(--line);border-radius:32px;padding:34px 40px 40px}
.acc__head{display:flex;align-items:center;gap:28px}
.acc__n{font-size:16px;color:var(--muted);align-self:flex-start}
.acc__t{font-size:34px;font-weight:var(--w-medium);letter-spacing:-.01em;margin-right:auto}
.tags{display:flex;gap:22px}
.acc__btn{display:grid;place-items:center;width:34px;height:34px;color:var(--ink)}
.acc__btn svg{width:26px;height:26px}
.acc__btn .v{transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.acc.is-open .acc__btn .v{opacity:0;transform:scaleY(0)}
/* Single wrapper child + min-height:0 — without both, the 0fr row does not
   actually collapse and a closed panel leaks its content. */
.acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.acc.is-open .acc__body{grid-template-rows:1fr}
.acc__inner{overflow:hidden;min-height:0}
.acc__shots{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-top:38px}
.shot{position:relative;height:226px;border-radius:14px;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
.pcard{position:absolute;left:14px;bottom:14px;right:14px;padding:16px 18px;border-radius:12px;
       color:#fff;background:rgba(20,20,20,.34);border:1px solid rgba(255,255,255,.22);
       -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pcard__t{font-size:19px;font-weight:var(--w-semibold)}
.pcard__m{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;color:rgba(255,255,255,.9)}
.pcard__m .i{width:15px;height:15px;flex:none}
.pcard__b{position:absolute;right:18px;bottom:18px;height:36px;display:grid;place-items:center;
          padding:0 18px;border-radius:var(--r-pill);font-size:14px;font-weight:var(--w-medium);
          background:rgba(255,255,255,.26);border:1px solid rgba(255,255,255,.4)}
.acc__foot{display:flex;align-items:center;justify-content:space-between;gap:60px;padding-top:34px}
.acc__foot .body{max-width:680px}

/* =============================== SERVICES =============================== */
.services{padding-top:214px}
.svc__grid{display:grid;grid-template-columns:530px 322px 325px;gap:53px;margin-top:56px;
           align-items:start}
.svc{position:relative;padding-top:60px}
.svc--2{margin-top:-30px}
.svc--3{margin-top:10px}
.svc__n{position:absolute;top:0;left:18px;font-size:110px;line-height:1;
        font-weight:var(--w-bold);color:#F1F1F1;letter-spacing:-.03em}
.svc__card{position:relative;display:flex;gap:26px;padding:34px;border-radius:26px;
           background:var(--surface-2)}
.svc__text{flex:1;min-width:0}
.svc__card .body{margin-top:20px}
.svc__card .linkarrow{margin-top:38px}
.svc__img{width:168px;height:246px;border-radius:18px;object-fit:cover;align-self:center}
.svc--1 .h3,.svc--2 .h3,.svc--3 .h3{font-size:27px;line-height:1.24;font-weight:var(--w-semibold)}

/* =============================== PROCESS ================================ */
.process{padding-top:78px}
.process__grid{display:grid;grid-template-columns:623px 578px;gap:0;align-items:start}
.process__copy{max-width:430px}
.process__copy .body{margin-top:34px;max-width:420px}
.process__copy .btn{margin-top:52px}
.steps{position:relative;display:grid;gap:26px}
.step{padding:26px 30px;border-radius:20px;background:#fff;
      box-shadow:0 14px 40px rgba(17,17,17,.08)}
.step.is-on{border-left:4px solid var(--gold)}
.step__t{display:flex;align-items:center;gap:14px;font-size:23px;font-weight:var(--w-semibold)}
.step .body{margin-top:12px}
.tick{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
      background:var(--surface-2);color:var(--ink);flex:none}
.tick svg{width:15px;height:15px}
.circ--float{position:absolute;right:-98px;top:112px;background:#fff;color:var(--ink);
             width:66px;height:66px;box-shadow:0 12px 34px rgba(17,17,17,.12)}
.circ--float svg{width:22px;height:22px}

/* ============================= TESTIMONIALS ============================= */
.tstm{padding-top:136px;overflow:hidden}
.tstm__head{display:grid;grid-template-columns:1fr auto;gap:80px;align-items:start}
.tstm__intro{margin-top:34px;max-width:700px}
.tstm__stats{display:flex;gap:56px;padding-top:56px}
.tstm__stats .stat{border:0;padding:0}
.tstm__stats .stat__n{font-size:44px}
.tstm__stats .stat__n span{font-size:24px}
.tstm__row{display:grid;grid-template-columns:334px 1fr;gap:22px;margin-top:50px}
.tstm__side{display:grid;gap:20px;align-content:start}
.scard{padding:28px 30px 34px;border-radius:20px;background:var(--gold);color:var(--ink)}
.scard__l{font-size:20px;font-weight:var(--w-medium)}
.scard__n{margin-top:44px;font-size:56px;line-height:1;font-weight:var(--w-semibold)}
.dcard{padding:26px 30px;border-radius:20px;background:var(--ink);color:#fff}
.dcard__t{font-size:20px;font-weight:var(--w-semibold)}
.dcard__b{margin-top:14px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.74)}
.quotes{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
        scrollbar-width:none;padding-right:60px}
.quotes::-webkit-scrollbar{display:none}
.quote{flex:0 0 638px;scroll-snap-align:start;display:flex;flex-direction:column;
       justify-content:space-between;padding:34px 30px;border-radius:20px;background:var(--surface-2)}
.quote p{font-size:21px;line-height:1.6}
.quote footer{display:flex;align-items:center;gap:16px;margin-top:44px}
.quote footer img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:top}
.quote__n{font-size:var(--fs-body);font-weight:var(--w-semibold)}
.stars{margin-top:2px;font-size:19px;color:var(--gold);letter-spacing:2px}

/* ============================== CONTACT CTA ============================= */
.cta{padding-top:82px}
.cta__box{position:relative;border-radius:34px;background:var(--ink);color:#fff;
          padding:36px 88px 50px;overflow:hidden}
.pill-label{display:inline-grid;place-items:center;height:48px;padding:0 30px;
            border:1px solid rgba(255,255,255,.5);border-radius:var(--r-pill);font-size:var(--fs-body)}
.cta__head{display:grid;grid-template-columns:640px 496px;gap:0;margin-top:28px;align-items:start}
.cta__t{font-size:64px;line-height:1.16;font-weight:var(--w-bold);letter-spacing:-.015em}
.cta__p{font-size:17px;line-height:1.75;color:rgba(255,255,255,.86)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px 30px;margin-top:36px;
      padding:24px 34px 30px;border-radius:22px;border:1px solid rgba(255,255,255,.22);
      background:rgba(255,255,255,.04)}
.field label{display:block;font-size:20px;margin-bottom:10px}
.input{display:flex;align-items:center;gap:12px;height:48px;padding:0 18px;border-radius:12px;
       border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05)}
.input .i{width:21px;height:21px;color:rgba(255,255,255,.62);flex:none}
.input i{width:1px;height:22px;background:rgba(255,255,255,.3);flex:none}
.input input{flex:1;min-width:0;border:0;background:none;outline:0;font-size:var(--fs-body);color:#fff}
.input input::placeholder{color:rgba(255,255,255,.5)}
.input:focus-within{border-color:var(--gold)}
.form__submit{grid-column:1/-1;justify-self:center;margin-top:16px;height:66px;padding:0 14px 0 40px;
              font-size:20px;font-weight:var(--w-semibold);gap:20px}
.form__submit .circ{color:#fff}

/* ================================ FOOTER ================================ */
.foot{padding-top:47px;padding-bottom:40px}
.foot .shell{padding-inline:54px}
.foot__grid{display:grid;grid-template-columns:1fr .7fr .7fr .9fr;gap:60px;
            padding-top:48px;border-top:1px solid var(--line)}
.foot__about{font-size:var(--fs-body);line-height:1.6;color:var(--muted);max-width:330px}
.foot__h{font-size:22px;font-weight:var(--w-semibold)}
.foot__h--sm{margin-top:44px;font-size:var(--fs-body);text-transform:uppercase;letter-spacing:.02em}
.foot__list{margin-top:20px;display:grid;gap:12px;font-size:var(--fs-body);color:var(--ink)}
.foot__list a:hover{color:var(--gold)}
.social{display:flex;gap:14px;margin-top:18px}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
          background:var(--gold);color:#fff;transition:background var(--dur) var(--ease)}
.social a:hover{background:#d99c1d}
.social svg{width:20px;height:20px}
.sub{display:flex;margin-top:20px;border-radius:10px;overflow:hidden;background:var(--surface-2)}
.sub input{flex:1;min-width:0;height:56px;padding:0 18px;border:0;background:none;outline:0;font-size:15px}
.sub button{padding:0 26px;background:var(--gold);color:#fff;font-weight:var(--w-medium)}
.foot__bar{display:flex;align-items:center;justify-content:space-between;gap:30px;
           margin-top:48px;padding-top:28px;border-top:1px solid var(--line);
           font-size:var(--fs-body);color:var(--muted)}
.foot__bar ul{display:flex;gap:40px}


/* ==========================================================================
   PORTFOLIO + SERVICES
   Both pages share a light header, a centred page hero, and the Contact CTA
   and footer from the home page.
   ========================================================================== */

/* ---------------------------- light header ------------------------------ */
.site-header--light{background:var(--surface)}
.site-header--light .logo{color:var(--ink)}
.site-header--light .nav a{color:var(--muted)}
.site-header--light .nav a:hover,.site-header--light .nav a.is-active{color:var(--ink)}
.site-header--light .burger span{background:var(--ink)}

/* ------------------------------ page hero ------------------------------- */
.phero{padding-top:10px;text-align:center}
.phero__t{color:var(--ink)}
.phero__p{margin:24px auto 0;max-width:1040px;
          font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--muted)}
.phero__b{margin-top:45px}

/* --------------------------- 3D coverflow ------------------------------- */
.flowwrap{margin-top:64px}
.flow{position:relative;height:578px;perspective:1600px;
      display:flex;align-items:center;justify-content:center}
.fl{position:absolute;border-radius:var(--r-lg);overflow:hidden;
    box-shadow:0 24px 60px rgba(17,17,17,.16)}
.fl img{width:100%;height:100%;object-fit:cover}
.fl--3{width:595px;height:574px;z-index:5;border:6px solid #fff;
       box-shadow:0 30px 80px rgba(17,17,17,.22)}
.fl--2{width:300px;height:552px;z-index:4;transform:translateX(-412px) rotateY(45deg)}
.fl--4{width:300px;height:558px;z-index:4;transform:translateX(403px) rotateY(-45deg)}
.fl--1{width:220px;height:452px;z-index:3;transform:translateX(-561px) rotateY(67deg)}
.fl--5{width:220px;height:460px;z-index:3;transform:translateX(557px) rotateY(-67deg)}
.expand{position:absolute;top:18px;right:18px;width:34px;height:34px;color:#fff;
        display:grid;place-items:center;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.expand svg{width:24px;height:24px}
.dots--center{position:static;display:flex;justify-content:center;gap:10px;margin-top:46px}
.dots--center .dot{background:#D9D9D9}
.dots--center .dot.is-on{background:var(--gold)}

/* ------------------------- project set sections ------------------------- */
.projset{padding-top:98px}
.projset__head{display:grid;grid-template-columns:1fr 442px;gap:82px;align-items:start}
.projset__head .btn{margin-top:38px;height:52px}
.projset__lede{padding-top:6px}

.caro{position:relative;margin-top:60px}
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
        width:1250px;max-width:calc(100% - 48px);margin-inline:auto}
.pc{position:relative;height:430px;border-radius:var(--r-lg);overflow:hidden}
.pc>img{width:100%;height:100%;object-fit:cover}
.pcdots{position:absolute;top:20px;right:18px;display:flex;gap:6px}
.pcdots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.75)}
.pcdots i.on{background:var(--gold)}
.pcap{position:absolute;left:16px;right:16px;bottom:16px;padding:16px 18px;border-radius:14px;
      color:#fff;background:rgba(30,30,30,.30);border:1px solid rgba(255,255,255,.22);
      -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.pcap__t{font-size:19px;font-weight:var(--w-semibold)}
.pcap__m{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:14px;color:rgba(255,255,255,.92)}
.pcap__m .i{width:16px;height:16px;flex:none}
.pcap__b{position:absolute;right:18px;bottom:20px;height:38px;display:grid;place-items:center;
         padding:0 18px;border-radius:var(--r-pill);font-size:15px;font-weight:var(--w-medium);
         background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.4)}
.carobtn{position:absolute;top:50%;translate:0 -50%;width:50px;height:50px;border-radius:50%;
         display:grid;place-items:center;background:#fff;color:var(--ink);z-index:2;
         box-shadow:0 8px 26px rgba(17,17,17,.14);transition:transform var(--dur) var(--ease)}
.carobtn:hover{transform:scale(1.06)}
.carobtn svg{width:20px;height:20px}
.carobtn--prev{left:22px}
.carobtn--next{right:22px}
.projset__foot{display:flex;align-items:center;justify-content:space-between;gap:60px;margin-top:40px}
.projset__foot .body{max-width:680px}

/* ============================== SERVICES =============================== */
.strip{margin-top:44px;overflow:hidden}
.strip__track{display:flex;gap:20px;width:max-content;animation:slide 46s linear infinite}
.strip:hover .strip__track{animation-play-state:paused}
.strip figure{width:402px;height:226px;flex:none;border-radius:var(--r-lg);overflow:hidden}
.strip figure img{width:100%;height:100%;object-fit:cover}

.svcblock{padding-top:78px}
.svcblock__grid{display:grid;grid-template-columns:1fr 656px;gap:36px;align-items:start}
.svcblock__copy{position:relative;padding-top:60px}
.ghost{position:absolute;top:0;left:-18px;font-size:104px;line-height:1;
       font-weight:var(--w-bold);color:#EDEDED;letter-spacing:-.03em;z-index:-1}
.svcblock__t{font-size:56px;line-height:1.16;font-weight:var(--w-bold);letter-spacing:-.02em}
.svcblock__copy .body{margin-top:22px;max-width:640px;font-size:20px;line-height:32px}
.svcblock__cta{display:flex;align-items:center;gap:20px;margin-top:44px}
.circ--ghost{width:52px;height:52px;background:#fff;color:var(--ink);border:1px solid var(--line)}
.circ--ghost svg{width:20px;height:20px}

.projcard{padding:32px;border-radius:26px;background:var(--surface-3)}
.projcard__t{font-size:36px;font-weight:var(--w-bold);letter-spacing:-.015em}
.chips{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.chips li{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 20px;
          border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;font-size:17px}
.chips li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
.projcard__m{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:17px;color:var(--ink)}
.projcard__m:first-of-type{margin-top:22px}
.projcard__m .i{width:19px;height:19px;color:var(--gold);flex:none}
.projcard img{width:100%;height:372px;object-fit:cover;border-radius:16px;margin-top:20px}


/* Per-page vertical calibration, measured against each Figma frame.
   Portfolio 4186 / Services 4306 total height. */
.page-portfolio .projset{padding-top:118px}
.page-portfolio .cta{padding-top:107px}
.page-services  .svcblock{padding-top:118px}
.page-services  .cta{padding-top:144px}

/* ==========================================================================
   PORTFOLIO DETAILS
   ========================================================================== */
.pd{padding-top:34px}
.pd__kicker{text-align:center}
.pd__title{display:flex;align-items:baseline;gap:20px;margin-top:98px}
.pd__name{font-size:40px;line-height:1.2;font-weight:var(--w-medium);letter-spacing:-.015em}
.pd__place{font-size:16px;color:var(--muted)}

.gal{display:grid;grid-template-columns:659px 1fr 1fr;grid-template-rows:214px 218px;
     gap:24px 22px;margin-top:30px}
.gal figure{position:relative;border-radius:var(--r-lg);overflow:hidden}
.gal figure img{width:100%;height:100%;object-fit:cover}
.gal__main{grid-row:1/3}
.seeall{position:absolute;right:18px;bottom:18px;height:38px;display:grid;place-items:center;
        padding:0 20px;border-radius:var(--r-pill);font-size:15px;color:#fff;
        background:rgba(255,255,255,.26);border:1px solid rgba(255,255,255,.42);
        -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

.tabs{display:flex;gap:0;margin-top:38px;border-bottom:2px solid var(--line-2);width:278px}
.tab{padding:0 24px 12px;font-size:var(--fs-body);color:var(--muted);
     border-bottom:2px solid transparent;margin-bottom:-2px}
.tab:first-child{padding-left:0}
.tab.is-on{color:var(--ink);font-weight:var(--w-semibold);border-bottom-color:var(--ink)}

.pd__grid{display:grid;grid-template-columns:900px 1fr;gap:0;margin-top:52px;align-items:start}
.pd__h{font-size:32px;font-weight:var(--w-bold);letter-spacing:-.015em}
.pd__col .lead{margin-top:22px;max-width:790px}
.hl{display:grid;grid-template-columns:1fr 1fr;gap:34px 26px;margin-top:30px}
.hl__k{display:flex;align-items:center;gap:9px;font-size:var(--fs-body);font-weight:var(--w-bold)}
.hl__k .i{width:20px;height:20px;color:var(--gold);flex:none}
.hl__v{margin-top:6px;font-size:var(--fs-body);color:var(--muted)}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.chead{padding-top:34px}
.chead__t{text-align:center}

.cband{position:relative;margin-top:44px;padding:82px 0 62px;background:var(--surface-2);overflow:hidden}
.cband__globe{position:absolute;left:0;bottom:0;width:100%;height:auto;opacity:.9;
              pointer-events:none;user-select:none}
.cband__grid{position:relative;display:grid;grid-template-columns:1fr 688px;gap:0;align-items:start;padding-inline:50px}
.ceyebrow{font-size:16px;color:var(--gold);font-weight:var(--w-medium)}
.cband__t{margin-top:22px;font-size:50px;line-height:1.16;font-weight:var(--w-bold);letter-spacing:-.02em}
.cband__p{margin-top:14px;max-width:400px}
.cband__h{margin-top:74px;font-size:24px;font-weight:var(--w-bold)}
.checks{margin-top:24px;display:grid;gap:16px;font-size:var(--fs-body);color:var(--muted)}
.checks li{display:flex;align-items:center;gap:14px}
.tickdark{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
          background:var(--ink);color:#fff;flex:none}
.tickdark svg{width:13px;height:13px;stroke-width:2.6}

.cform{padding:32px;border-radius:var(--r-lg);background:#fff}
.cform__t{font-size:30px;font-weight:var(--w-bold);letter-spacing:-.015em}
.cform form{margin-top:26px}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cfield{margin-bottom:20px}
.cfield label{display:block;font-size:15px;margin-bottom:8px;color:var(--ink)}
.cfield input,.cfield textarea{width:100%;padding:13px 16px;border:1px solid var(--line-2);
       border-radius:8px;font-size:16px;color:var(--ink);background:#fff;outline:0;
       transition:border-color var(--dur) var(--ease)}
.cfield textarea{resize:vertical;min-height:112px}
.cfield input::placeholder,.cfield textarea::placeholder{color:#9A9A9A}
.cfield input:focus,.cfield textarea:focus{border-color:var(--gold)}
.agree{display:flex;align-items:center;gap:14px;font-size:15px;cursor:pointer}
.agree input{position:absolute;opacity:0;width:0;height:0}
.switch{position:relative;width:44px;height:24px;border-radius:var(--r-pill);background:var(--ink);
        flex:none;transition:background var(--dur) var(--ease)}
.switch::after{content:"";position:absolute;top:3px;left:23px;width:18px;height:18px;border-radius:50%;
        background:#fff;transition:left var(--dur) var(--ease)}
.agree input:not(:checked)+.switch{background:#C7C7C7}
.agree input:not(:checked)+.switch::after{left:3px}
.agree a{font-weight:var(--w-semibold);text-decoration:underline}
.cform__btn{width:100%;height:52px;margin-top:24px;border-radius:8px;background:var(--gold);
            color:#fff;font-size:var(--fs-body);font-weight:var(--w-semibold);
            transition:background var(--dur) var(--ease)}
.cform__btn:hover{background:#d99c1d}

.icards{padding-top:100px}
.icards__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}
.icard{padding:38px 30px 34px;border-radius:var(--r-lg);background:var(--surface-3);text-align:center}
.icard__i{display:grid;place-items:center;width:60px;height:60px;margin:0 auto;border-radius:50%;
          background:#fff;color:var(--gold)}
.icard__i svg{width:26px;height:26px}
.icard__t{margin-top:22px;font-size:22px;font-weight:var(--w-bold)}
.icard__v{margin-top:8px;font-size:var(--fs-body);color:var(--muted)}

.mapsec{padding-top:90px}
.mapbox{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 10px 34px rgba(17,17,17,.08)}
.mapbox img{width:100%;height:322px;object-fit:cover;display:block}
.mapbox__a{display:flex;align-items:center;gap:12px;padding:14px 22px;background:#fff;
           font-size:var(--fs-body);color:var(--ink)}
.mapbox__a .i{width:20px;height:20px;color:#0074EC;flex:none}


/* Per-page vertical calibration — Portfolio Details 2582 / Contact 3199. */
.page-pdetails .cta{padding-top:89px}
.page-contact  .cband{padding:82px 0 110px}
.page-contact  .icards{padding-top:130px}
.page-contact  .mapsec{padding-top:120px}
.page-contact  .cta{padding-top:139px}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.eyebrow--dark{color:var(--ink)}
.btn--ghost-dark{border:1px solid var(--line-2);color:var(--ink);background:#fff}
.btn--ghost-dark:hover{background:var(--surface-2)}

.abhero{padding-top:12px}
.abhero__grid{display:grid;grid-template-columns:1fr 346px;gap:52px;align-items:start}
.abhero__t{margin-top:22px;color:var(--ink)}
.abhero__p{font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--muted);padding-top:4px}
.abhero__cta{display:flex;gap:26px;margin-top:78px}

.abcards{display:grid;grid-template-columns:437px 1fr;gap:30px;margin-top:60px;height:387px;
         width:1364px;max-width:calc(100% - 48px);margin-inline:auto}
.expcard{position:relative;padding:36px 34px;border-radius:30px;color:#fff;overflow:hidden;
         background:linear-gradient(150deg,#2B2B2B 0%,#3D3D3D 60%,#4A4A4A 100%)}
.expcard::after{content:"";position:absolute;left:-40px;bottom:-60px;width:520px;height:300px;
        border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.10),transparent)}
.expcard__n{font-size:68px;line-height:1.1;font-weight:var(--w-bold);letter-spacing:-.03em}
.expcard__n span{color:var(--gold)}
.expcard__l{margin-top:2px;font-size:var(--fs-body);color:rgba(255,255,255,.62)}
.faces{position:absolute;left:34px;bottom:36px;display:flex;align-items:center}
.face{width:58px;height:58px;border-radius:50%;overflow:hidden;margin-right:-16px;
      border:1px solid rgba(255,255,255,.35)}
.face img{width:100%;height:100%;object-fit:cover}
.face--empty{background:rgba(255,255,255,.14)}
.face__plus{margin-left:30px;font-size:34px;font-weight:var(--w-regular);color:#fff}

.vidcard{position:relative;border-radius:var(--r-lg);overflow:hidden}
.vidcard img{width:100%;height:100%;object-fit:cover}
.vidcard figcaption{position:absolute;inset:0;display:grid;place-items:center;
        font-size:46px;font-weight:var(--w-bold);color:#fff;letter-spacing:-.02em;
        text-shadow:0 2px 18px rgba(0,0,0,.35)}
.play{position:absolute;right:16px;bottom:-8px;width:118px;height:118px;border-radius:50%;
      display:grid;place-items:center;background:var(--gold);color:#fff;
      border:8px solid #fff;transition:transform var(--dur) var(--ease)}
.play:hover{transform:scale(1.04)}
.play svg{width:40px;height:40px}

.stmt{padding-top:78px}
.stmt__t{text-align:center;font-size:34px;line-height:1.42;font-weight:var(--w-bold);
         text-transform:uppercase;letter-spacing:-.015em}

.phil{padding-top:120px}
.phil__grid{display:grid;grid-template-columns:704px 1fr;gap:26px;align-items:start;padding-inline:50px}
.phil__img{border-radius:var(--r-lg);overflow:hidden;height:595px}
.phil__img img{width:100%;height:100%;object-fit:cover}
.phil__col{display:grid;gap:24px}
/* NB: .pcard is already the Portfolio caption card. These must stay distinct. */
.philcard{position:relative;padding:30px 32px;border-radius:var(--r-lg)}
.philcard--gold{background:var(--gold);color:#fff}
.philcard--grey{background:var(--surface-3)}
.philcard__t{font-size:29px;font-weight:var(--w-bold);letter-spacing:-.015em;padding-right:56px}
.philcard__b{margin-top:14px;font-size:17px;line-height:1.6}
.philcard--gold .philcard__b{color:rgba(255,255,255,.94)}
.philcard--grey .philcard__b{color:var(--muted)}
.philcard__a{position:absolute;top:26px;right:26px;display:grid;place-items:center;
          width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);
          transition:transform var(--dur) var(--ease)}
.philcard__a--dark{background:var(--ink);color:#fff}
.philcard__a:hover{transform:translate(2px,-2px)}
.philcard__a svg{width:18px;height:18px}

.feats{margin-top:120px;padding:40px 0 45px;background:var(--surface-2)}
.feats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
             width:925px;max-width:calc(100% - 48px);margin-inline:auto}
.feat{padding:36px 24px 32px;border-radius:var(--r-lg);background:var(--ink);
      color:#fff;text-align:center}
.feat__i{display:grid;place-items:center;width:46px;height:46px;margin:0 auto;color:var(--gold)}
.feat__i svg{width:42px;height:42px}
.feat__t{margin-top:22px;font-size:23px;font-weight:var(--w-bold)}
.feat__b{margin-top:8px;font-size:17px;color:rgba(255,255,255,.66)}


.page-about .cta{padding-top:208px}
/* ============================== RESPONSIVE ============================== */
@media (max-width:1180px){
  :root{--fs-h1:52px;--lh-h1:62px;--fs-h2:44px;--lh-h2:54px;--fs-h3:38px;--lh-h3:48px;
        --fs-body-lg:20px;--lh-body-lg:32px;--fs-stat:52px}
  .hero__top{grid-template-columns:1fr;gap:32px}
  .about__grid,.process__grid,.cta__head{grid-template-columns:1fr;gap:48px}
  .about__media{height:460px}
  .svc__grid{grid-template-columns:repeat(2,1fr);gap:36px}
  .svc--2,.svc--3{margin-top:0}
  .tstm__row{grid-template-columns:1fr}
  .quote{flex-basis:min(560px,86vw)}
  .circ--float{display:none}
  .cta__box{padding:36px 40px 52px}
}
@media (max-width:1000px){
  .nav,.shell--header .btn{display:none}
  .burger{display:flex}
  .site-header{height:96px}
  .hero-wrap{background:linear-gradient(var(--ink) 0 620px,var(--surface) 620px)}
  .hero__slides{height:420px}
  .why__grid{grid-template-columns:1fr;gap:24px}
  .wcard{min-height:0;gap:56px}
  .foot__grid{grid-template-columns:1fr 1fr;gap:44px}
}
@media (max-width:760px){
  :root{--fs-h1:36px;--lh-h1:44px;--fs-h2:30px;--lh-h2:38px;--fs-h3:28px;--lh-h3:36px;
        --fs-body:16px;--lh-body:24px;--fs-body-lg:18px;--lh-body-lg:28px;
        --fs-stat:40px;--fs-eyebrow:14px}
  .shell{width:calc(100% - 40px)}
  .hero-wrap{background:linear-gradient(var(--ink) 0 560px,var(--surface) 560px)}
  .hero__cta{margin-top:44px;flex-wrap:wrap;gap:14px}
  .hero__slides{height:280px}
  .stats{grid-template-columns:1fr 1fr;gap:32px 0}
  .stat{padding-left:22px}
  .stats .stat:nth-child(3){border-left:0;padding-left:0}
  .acc{padding:24px 22px 28px;border-radius:22px}
  .acc__head{flex-wrap:wrap;gap:14px}
  .acc__t{font-size:26px;width:100%;order:-1}
  .acc__shots{grid-template-columns:1fr}
  .shot{height:240px}
  .acc__foot{flex-direction:column;align-items:flex-start;gap:24px}
  .svc__grid{grid-template-columns:1fr}
  .svc__img{display:none}
  .tstm__head{grid-template-columns:1fr;gap:36px}
  .tstm__stats{padding-top:0;gap:36px}
  .cta__box{padding:28px 22px 40px;border-radius:24px}
  .cta__t{font-size:34px}
  .form{grid-template-columns:1fr;padding:24px 20px 32px}
  .form__submit{padding:0 12px 0 26px;font-size:17px;height:60px}
  .foot__grid{grid-template-columns:1fr;gap:38px}
  .foot__bar{flex-direction:column;align-items:flex-start;gap:16px}
  .foot__bar ul{gap:24px;flex-wrap:wrap}
}

@media (max-width:1180px){
  .flow{height:440px;perspective:1200px}
  .fl--3{width:440px;height:430px}
  .fl--2{width:220px;height:410px;transform:translateX(-300px) rotateY(45deg)}
  .fl--4{width:220px;height:414px;transform:translateX(295px) rotateY(-45deg)}
  .fl--1,.fl--5{display:none}
  .projset__head{grid-template-columns:1fr;gap:28px}
  .svcblock__grid{grid-template-columns:1fr;gap:40px}
  .projcard img{height:320px}
}
@media (max-width:1000px){
  .pcards{grid-template-columns:1fr 1fr}
  .pcards>:nth-child(3){display:none}
  .carobtn{display:none}
}
@media (max-width:760px){
  .phero{padding-top:14px}
  .phero__p{margin-top:24px}
  .phero__b{margin-top:32px}
  .flowwrap{margin-top:44px}
  .flow{height:300px;perspective:900px}
  .fl--3{width:min(300px,78vw);height:290px}
  .fl--2,.fl--4{display:none}
  .dots--center{margin-top:28px}
  .projset{padding-top:64px}
  .caro{margin-top:34px}
  .pcards{grid-template-columns:1fr;width:100%}
  .pcards>:nth-child(2),.pcards>:nth-child(3){display:none}
  .pc{height:360px}
  .projset__foot{flex-direction:column;align-items:flex-start;gap:22px}
  .strip figure{width:280px;height:172px}
  .svcblock{padding-top:56px}
  .svcblock__copy{padding-top:44px}
  .ghost{font-size:74px;left:-4px}
  .svcblock__t{font-size:30px}
  .projcard{padding:20px;border-radius:20px}
  .projcard__t{font-size:23px}
  .chips li{height:36px;padding:0 14px;font-size:14px}
  .projcard img{height:230px}
  .svcblock__cta{flex-wrap:wrap;gap:14px}
}
@media (max-width:1180px){
  .gal{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:18px}
  .gal__main{grid-row:auto;grid-column:1/3;height:380px}
  .gal figure{height:220px}
  .pd__grid{grid-template-columns:1fr;gap:44px}
  .cband__grid{grid-template-columns:1fr;gap:44px}
  .cband__h{margin-top:44px}
  .icards__grid{gap:22px}
}
@media (max-width:760px){
  .pd{padding-top:16px}
  .pd__title{margin-top:52px;flex-direction:column;align-items:flex-start;gap:6px}
  .pd__name{font-size:27px}
  .gal{grid-template-columns:1fr;gap:14px}
  .gal__main{grid-column:auto;height:250px}
  .gal figure{height:190px}
  .tabs{width:100%}
  .pd__h{font-size:25px}
  .hl{grid-template-columns:1fr;gap:22px}
  .cband{margin-top:26px;padding:44px 0 40px}
  .cband__globe{left:-160px;bottom:-90px;width:760px}
  .cband__t{font-size:32px}
  .cform{padding:20px}
  .cform__t{font-size:24px}
  .cform__row{grid-template-columns:1fr;gap:0}
  .icards{padding-top:56px}
  .icards__grid{grid-template-columns:1fr;gap:16px}
  .icard{padding:26px 20px 24px}
  .mapsec{padding-top:52px}
  .mapbox img{height:220px}
}
@media (max-width:1180px){
  .abhero__grid{grid-template-columns:1fr;gap:26px}
  .abcards{grid-template-columns:1fr;gap:22px}
  .vidcard{height:340px}
  .vidcard figcaption{font-size:36px}
  .phil__grid{grid-template-columns:1fr;gap:26px}
  .phil__img{height:420px}
  .stmt__t{font-size:27px}
}
@media (max-width:760px){
  .abhero__cta{margin-top:40px;flex-wrap:wrap;gap:14px}
  .abcards{margin-top:38px}
  .expcard{padding:26px 22px 120px;border-radius:22px}
  .expcard__n{font-size:38px}
  .face{width:46px;height:46px}
  .vidcard{height:230px}
  .vidcard figcaption{font-size:26px}
  .play{width:78px;height:78px;border-width:6px;right:12px;bottom:-6px}
  .play svg{width:26px;height:26px}
  .stmt{padding-top:72px}
  .stmt__t{font-size:20px;line-height:1.5}
  .phil{padding-top:56px}
  .phil__img{height:260px}
  .philcard{padding:22px}
  .philcard__t{font-size:22px;padding-right:48px}
  .feats{margin-top:60px;padding:28px 0 32px}
  .feats__grid{grid-template-columns:1fr;gap:14px}
}