:root{
      --ink:#161616;
      --paper:#f3f1ec;
      --paper-2:#ebe7df;
      --white:#fff;
      --orange:#f28f3f;
      --orange-2:#faaf40;
      --taupe:#9a8479;
      --line:rgba(22,22,22,.14);
      --muted:#77716c;
      --max:1480px;
      --pad:clamp(22px,4vw,64px);
      --display:Arial, Helvetica, sans-serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);overflow-x:hidden}
    body.menu-open{overflow:hidden}
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button{font:inherit}
    .wrap{width:min(100%,var(--max));margin:auto;padding-inline:var(--pad)}
    .eyebrow{display:flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:.15em;font-size:.72rem;font-weight:700}
    .eyebrow:before{content:"";width:34px;height:2px;background:var(--orange)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--ink);padding:14px 20px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:.72rem;transition:.25s ease;background:transparent;cursor:pointer}
    .btn:hover{background:var(--ink);color:var(--paper)}
    .btn.orange{background:var(--orange);border-color:var(--orange);color:#171717}
    .btn.orange:hover{background:var(--orange-2);border-color:var(--orange-2)}

    header{position:absolute;top:0;left:0;right:0;z-index:20;padding:22px 0}
    .nav{display:flex;align-items:center;justify-content:space-between;gap:28px}
    .brand{display:flex;align-items:center;gap:14px}
    .brand img{width:112px;height:auto}
    .brand small{font-size:.69rem;line-height:1.3;text-transform:uppercase;letter-spacing:.12em;color:#d5d0c7;max-width:150px}
    .navlinks{display:flex;align-items:center;gap:30px;color:#f5f1ea;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
    .navlinks a{position:relative}
    .navlinks a:after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:2px;background:var(--orange);transition:.25s}
    .navlinks a:hover:after{width:100%}
    .menu-btn{display:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.12);color:white;cursor:pointer}
    .menu-btn span,.menu-btn:before,.menu-btn:after{content:"";display:block;width:20px;height:2px;background:currentColor;margin:5px auto;transition:.25s}

    .hero{min-height:780px;background:#1c1c1c;color:#f8f4ec;position:relative;overflow:hidden;display:grid;align-items:center;padding:132px 0 80px}
    .hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 40%,rgba(242,143,63,.14),transparent 34%),linear-gradient(135deg,rgba(255,255,255,.025) 25%,transparent 25%) 0 0/70px 70px;pointer-events:none}
    .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:clamp(40px,7vw,110px);align-items:center;position:relative}
    .hero-copy{position:relative;z-index:2}
    .hero h1{font-size:clamp(4.4rem,9.5vw,10rem);line-height:.78;letter-spacing:-.065em;margin:28px 0 34px;max-width:960px;text-transform:uppercase;font-weight:900}
    .hero h1 .outline{-webkit-text-stroke:1px rgba(248,244,236,.64);color:transparent}
    .hero h1 .accent{color:var(--orange)}
    .hero-lead{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;max-width:760px}
    .hero-lead p{margin:0;color:#bdb7ae;font-size:clamp(1rem,1.4vw,1.22rem);line-height:1.6;max-width:520px}
    .hero-art{position:relative;min-height:560px;display:grid;place-items:center}
    .orbit{position:absolute;width:min(42vw,620px);aspect-ratio:1;border:1px solid rgba(255,255,255,.16);border-radius:50%;animation:spin 26s linear infinite}
    .orbit:before,.orbit:after{content:"";position:absolute;width:10px;height:10px;background:var(--orange);border-radius:50%}
    .orbit:before{top:9%;left:20%}.orbit:after{right:5%;bottom:32%}
    .art-frame{width:min(33vw,455px);aspect-ratio:.82;overflow:hidden;border-radius:48% 52% 45% 55% / 36% 43% 57% 64%;position:relative;background:#333;box-shadow:0 40px 80px rgba(0,0,0,.4);transform:rotate(2deg)}
    .art-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity 1s ease,transform 5s ease}
    .art-frame img.active{opacity:1;transform:scale(1)}
    .art-tag{position:absolute;right:1%;bottom:12%;background:var(--orange);color:#161616;padding:16px 18px;font-size:.72rem;line-height:1.35;text-transform:uppercase;letter-spacing:.1em;font-weight:800;max-width:180px;transform:rotate(-3deg)}
    .hero-number{position:absolute;right:0;top:4%;font-size:.7rem;letter-spacing:.14em;color:#8a857f;writing-mode:vertical-rl;text-transform:uppercase}
    @keyframes spin{to{transform:rotate(360deg)}}

    .ticker{background:var(--orange);overflow:hidden;border-block:1px solid #111}
    .ticker-track{display:flex;width:max-content;animation:marquee 24s linear infinite}
    .ticker span{font-size:clamp(1.6rem,3vw,3.2rem);font-weight:900;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;padding:18px 24px}
    .ticker i{font-style:normal;margin-left:44px}
    @keyframes marquee{to{transform:translateX(-50%)}}

    section{position:relative}
    .services{padding:clamp(90px,12vw,170px) 0}
    .section-head{display:grid;grid-template-columns:.6fr 1.4fr;gap:40px;align-items:end;margin-bottom:58px}
    .section-head h2{font-size:clamp(3rem,6.5vw,7rem);line-height:.88;letter-spacing:-.055em;text-transform:uppercase;margin:0;font-weight:900}
    .section-head p{margin:0 0 10px;color:var(--muted);font-size:1.02rem;line-height:1.65;max-width:560px;justify-self:end}
    .service-list{border-top:1px solid var(--line)}
    .service-item{display:grid;grid-template-columns:90px 1fr 1.25fr auto;gap:24px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);transition:.25s}
    .service-item:hover{padding-left:18px;background:rgba(255,255,255,.36)}
    .service-item .num{font-size:.72rem;letter-spacing:.12em;color:var(--muted)}
    .service-item h3{font-size:clamp(1.6rem,2.5vw,2.8rem);letter-spacing:-.04em;margin:0}
    .service-item p{margin:0;color:var(--muted);line-height:1.6}
    .service-item .arrow{font-size:2rem;color:var(--orange)}

    .work{background:#171717;color:#f7f3eb;padding:clamp(90px,12vw,170px) 0}
    .work .section-head p{color:#99948d}
    .work-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:22px}
    .project{position:relative;overflow:hidden;background:#292929;min-height:420px}
    .project.tall{min-height:730px}
    .project img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.65,.2,1);filter:saturate(.88)}
    .project:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.68),transparent 54%)}
    .project:hover img{transform:scale(1.045)}
    .project-copy{position:absolute;left:28px;right:28px;bottom:25px;z-index:2;display:flex;align-items:end;justify-content:space-between;gap:18px}
    .project h3{margin:4px 0 0;font-size:clamp(1.55rem,2.3vw,2.7rem);letter-spacing:-.04em}
    .project small{text-transform:uppercase;letter-spacing:.12em;color:#d5d0c9}
    .project-no{width:46px;height:46px;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;border-radius:50%;font-size:.72rem;flex:none}
    .project-stack{display:grid;gap:22px}
    .project-stack .project{min-height:354px}
    .work-actions{display:flex;justify-content:flex-end;margin-top:36px}
    .work .btn{border-color:#f3eee7;color:#f3eee7}.work .btn:hover{background:#f3eee7;color:#171717}

    .about{padding:clamp(90px,12vw,170px) 0;background:var(--paper-2)}
    .about-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,8vw,120px);align-items:center}
    .about-visual{position:relative;min-height:640px}
    .about-visual .big{position:absolute;left:0;top:0;width:78%;height:82%;object-fit:cover}
    .about-visual .small{position:absolute;right:0;bottom:0;width:46%;height:46%;object-fit:cover;border:14px solid var(--paper-2)}
    .stamp{position:absolute;right:5%;top:4%;width:125px;aspect-ratio:1;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;text-align:center;font-size:.7rem;line-height:1.45;font-weight:800;text-transform:uppercase;letter-spacing:.09em;background:var(--orange);transform:rotate(8deg)}
    .about-copy h2{font-size:clamp(3.2rem,6vw,6.8rem);line-height:.88;letter-spacing:-.055em;text-transform:uppercase;margin:24px 0 30px;font-weight:900}
    .about-copy .lead{font-size:clamp(1.25rem,2vw,1.85rem);line-height:1.35;max-width:630px;margin:0 0 26px}
    .about-copy p{color:var(--muted);line-height:1.72;max-width:620px}
    .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:42px 0;border-top:1px solid var(--line);padding-top:24px}
    .fact strong{display:block;font-size:clamp(2rem,3.5vw,3.5rem);letter-spacing:-.05em}.fact span{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}

    .clients{padding:72px 0 95px;background:#faf8f4;border-top:1px solid var(--line)}
    .client-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:35px}
    .client-head h2{font-size:clamp(2.2rem,4vw,4.2rem);letter-spacing:-.045em;margin:0;text-transform:uppercase}
    .client-head p{max-width:480px;color:var(--muted);line-height:1.6;margin:0}
    .logos{display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
    .logo-cell{min-height:150px;display:grid;place-items:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px;background:#fff;transition:.2s}
    .logo-cell:hover{background:var(--paper-2)}
    .logo-cell img{max-width:105px;max-height:62px;object-fit:contain;filter:grayscale(1);opacity:.68;transition:.2s}.logo-cell:hover img{filter:none;opacity:1}

    .cta{background:var(--orange);padding:clamp(85px,10vw,145px) 0}
    .cta-grid{display:grid;grid-template-columns:1.55fr .45fr;gap:30px;align-items:end}
    .cta h2{font-size:clamp(4rem,8vw,9rem);line-height:.8;letter-spacing:-.065em;text-transform:uppercase;margin:0;font-weight:900}
    .cta-side{display:grid;gap:20px;justify-items:start}.cta-side p{font-size:1.05rem;line-height:1.6;margin:0;max-width:340px}

    footer{background:#161616;color:#efebe3;padding:54px 0 28px}
    .footer-top{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:36px;align-items:start;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.13)}
    .footer-brand img{width:135px;margin-bottom:18px}.footer-brand p{color:#aaa49d;max-width:390px;line-height:1.6}
    .footer-col h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:#807a74;margin:0 0 16px}.footer-col a,.footer-col span{display:block;margin:9px 0;color:#e7e2d9}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:24px;color:#817c76;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}

    .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}.reveal.show{opacity:1;transform:none}
    .mobile-menu{position:fixed;inset:0;background:#171717;color:#f5f1e8;z-index:50;display:grid;place-items:center;opacity:0;visibility:hidden;transition:.25s}
    .mobile-menu.open{opacity:1;visibility:visible}.mobile-menu nav{display:grid;gap:18px;text-align:center}.mobile-menu a{font-size:clamp(2.5rem,9vw,5.5rem);font-weight:900;letter-spacing:-.05em;text-transform:uppercase}.mobile-menu a:hover{color:var(--orange)}
    .close-menu{position:absolute;right:24px;top:24px;width:48px;height:48px;background:var(--orange);border:0;font-size:1.6rem;cursor:pointer}

    @media(max-width:980px){
      .navlinks{display:none}.menu-btn{display:block}.brand small{display:none}
      .hero{min-height:auto;padding-top:128px}.hero-grid{grid-template-columns:1fr;gap:20px}.hero h1{font-size:clamp(4rem,14vw,8rem)}.hero-art{min-height:520px}.orbit{width:min(78vw,560px)}.art-frame{width:min(62vw,420px)}
      .section-head{grid-template-columns:1fr}.section-head p{justify-self:start}.service-item{grid-template-columns:60px 1fr auto}.service-item p{grid-column:2/4}
      .work-grid{grid-template-columns:1fr}.project.tall{min-height:620px}.project-stack{grid-template-columns:1fr 1fr}.project-stack .project{min-height:380px}
      .about-grid{grid-template-columns:1fr}.about-visual{min-height:620px}.facts{max-width:620px}
      .logos{grid-template-columns:repeat(4,1fr)}.cta-grid{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}
    }
    @media(max-width:620px){
      .hero{padding-bottom:54px}.hero-lead{grid-template-columns:1fr}.hero-art{min-height:420px}.art-frame{width:78vw}.orbit{width:92vw}.art-tag{right:0;bottom:8%;max-width:150px;padding:12px}
      .section-head{margin-bottom:38px}.service-item{grid-template-columns:42px 1fr auto;gap:14px;padding:22px 0}.service-item p{font-size:.9rem}.service-item:hover{padding-left:0;background:none}
      .project.tall{min-height:500px}.project-stack{grid-template-columns:1fr}.project-stack .project{min-height:360px}.project-copy{left:20px;right:20px;bottom:18px}
      .about-visual{min-height:470px}.about-visual .big{width:86%;height:78%}.about-visual .small{width:50%;height:42%;border-width:8px}.stamp{width:96px;font-size:.6rem}
      .facts{grid-template-columns:1fr 1fr}.facts .fact:last-child{grid-column:1/-1}
      .client-head{display:block}.client-head p{margin-top:14px}.logos{grid-template-columns:repeat(2,1fr)}.logo-cell{min-height:120px}
      .footer-top{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}
      .ticker span{padding:15px 16px}.cta h2{font-size:clamp(3.5rem,18vw,6rem)}
    }
    @media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}.reveal{opacity:1;transform:none}}


/* Homepage finalisation */
.navlinks a[aria-current="page"]:after{width:100%}
.section-actions{display:flex;justify-content:flex-end;margin-top:34px}
.services .section-actions .btn{background:transparent}
.services .section-actions .btn:hover{background:var(--ink);color:var(--paper)}
@media(max-width:620px){
  .section-actions{justify-content:flex-start}
}


/* =========================================================
   SERVICES PAGE
   ========================================================= */
.page-hero{padding:170px 0 95px;border-bottom:1px solid var(--line)}
.page-hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:80px;align-items:end}
.page-hero h1{font-size:clamp(4.5rem,10vw,10rem);line-height:.82;letter-spacing:-.075em;margin:18px 0 0}
.page-hero h1 em{font-family:Georgia,serif;font-weight:400}
.page-hero-intro{padding-bottom:10px}
.page-hero-intro .lead{font-size:clamp(1.25rem,2vw,1.8rem);line-height:1.35;margin:0 0 24px}
.page-hero-intro>p:not(.lead){color:var(--muted);line-height:1.7;margin-bottom:30px}

.services-index{padding:42px 0 62px;border-bottom:1px solid var(--line)}
.service-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.service-jump a{border:1px solid var(--line);padding:12px 18px;border-radius:999px;text-decoration:none;color:var(--ink);transition:.25s}
.service-jump a:hover{background:var(--orange);border-color:var(--orange);color:#111}

.service-detail{padding:110px 0;border-bottom:1px solid var(--line);scroll-margin-top:90px}
.service-detail.alt{background:var(--soft)}
.service-detail-grid{display:grid;grid-template-columns:90px minmax(0,1.1fr) minmax(280px,.9fr);gap:50px;align-items:start}
.service-number{font-size:1rem;color:var(--muted);padding-top:12px}
.service-heading h2{font-size:clamp(2.6rem,5.5vw,5.6rem);line-height:.97;letter-spacing:-.055em;margin:18px 0 0;max-width:900px}
.service-copy>p{font-size:1.08rem;line-height:1.7;color:var(--muted);margin:0 0 30px}
.service-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.service-list li{padding:15px 0;border-bottom:1px solid var(--line);font-size:1rem}
.service-list li::before{content:"↗";display:inline-block;margin-right:12px;color:var(--orange)}

.process-section{padding:120px 0;background:var(--ink);color:var(--paper)}
.process-section .section-kicker{color:rgba(255,255,255,.55)}
.process-head{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:end;margin:30px 0 60px}
.process-head h2{font-size:clamp(3rem,6vw,6rem);line-height:.93;letter-spacing:-.055em;margin:0}
.process-head p{color:rgba(255,255,255,.68);line-height:1.75;font-size:1.05rem}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.16)}
.process-step{padding:32px 28px 18px 0;border-right:1px solid rgba(255,255,255,.16);min-height:250px}
.process-step:not(:first-child){padding-left:28px}
.process-step:last-child{border-right:0}
.process-step span{color:var(--orange);font-size:.9rem}
.process-step h3{font-size:1.65rem;margin:35px 0 14px}
.process-step p{font-size:.95rem;line-height:1.65;color:rgba(255,255,255,.62)}

.services-cta{padding:120px 0}
.services-cta h2{font-size:clamp(3.5rem,7vw,7.4rem);line-height:.9;letter-spacing:-.06em;margin:20px 0 0}
.services-cta h2 em{font-family:Georgia,serif;font-weight:400}
.services-cta .text-link{display:block;margin-top:22px;color:var(--muted);text-decoration:none}
.services-cta .text-link:hover{color:var(--orange)}

@media(max-width:900px){
  .page-hero-grid,.service-detail-grid,.process-head{grid-template-columns:1fr}
  .page-hero-grid{gap:38px}
  .service-detail-grid{gap:24px}
  .service-number{padding-top:0}
  .process-grid{grid-template-columns:1fr 1fr}
  .process-step:nth-child(2){border-right:0}
  .process-step:nth-child(3),.process-step:nth-child(4){border-top:1px solid rgba(255,255,255,.16)}
}
@media(max-width:620px){
  .page-hero{padding:135px 0 70px}
  .page-hero h1{font-size:clamp(3.8rem,18vw,6.4rem)}
  .service-detail{padding:75px 0}
  .service-jump{gap:8px}
  .service-jump a{font-size:.86rem;padding:10px 14px}
  .process-grid{grid-template-columns:1fr}
  .process-step,.process-step:not(:first-child){padding:28px 0;border-right:0;border-top:1px solid rgba(255,255,255,.16);min-height:0}
  .process-step:first-child{border-top:0}
  .process-section,.services-cta{padding:85px 0}
}


/* =========================================================
   SERVICES PAGE — HOMEPAGE COLOUR IDENTITY
   Keeps the same dark / warm paper / orange rhythm as index.html
   ========================================================= */

/* Dark opening, matching the homepage hero */
.services-hero.page-hero{
  background:#1c1c1c;
  color:var(--paper);
  border-bottom:0;
}
.services-hero .eyebrow{color:var(--orange)}
.services-hero .page-hero-intro .lead{color:var(--paper)}
.services-hero .page-hero-intro>p:not(.lead){color:rgba(243,241,236,.66)}
.services-hero .btn{
  border-color:var(--paper);
  color:var(--paper);
}
.services-hero .btn:hover{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--ink);
}

/* Warm transition section — same family as About on the homepage */
.services-index{
  background:var(--paper-2);
  color:var(--ink);
}
.services-index .section-kicker{color:var(--muted)}
.service-jump a{
  border-color:rgba(22,22,22,.22);
  background:transparent;
  color:var(--ink);
}
.service-jump a:hover,
.service-jump a:focus-visible{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--ink);
}

/* Editorial rhythm using the homepage palette */
#branding{
  background:var(--paper);
  color:var(--ink);
}
#graphic{
  background:var(--paper-2);
  color:var(--ink);
}
#web{
  background:#171717;
  color:var(--paper);
}
#motion{
  background:var(--paper);
  color:var(--ink);
}
#presentations{
  background:var(--paper-2);
  color:var(--ink);
}
#consultancy{
  background:#171717;
  color:var(--paper);
}

/* Orange details carry the Freed Graphics identity through the page */
.service-detail .eyebrow,
.service-number{
  color:var(--orange);
}
.service-heading h2{
  color:inherit;
}
.service-detail:not(#web):not(#consultancy) .service-copy>p{
  color:var(--muted);
}
#web .service-copy>p,
#consultancy .service-copy>p{
  color:rgba(243,241,236,.64);
}
#web .service-list,
#consultancy .service-list{
  border-top-color:rgba(255,255,255,.16);
}
#web .service-list li,
#consultancy .service-list li{
  border-bottom-color:rgba(255,255,255,.16);
}

/* The process remains the strong dark chapter, like Selected Work on Home */
.process-section{
  background:#1c1c1c;
}

/* Finish with the same orange CTA treatment as the homepage */
.services-cta{
  background:var(--orange);
  color:var(--ink);
}
.services-cta .section-kicker,
.services-cta .cta-side p,
.services-cta .text-link{
  color:rgba(22,22,22,.72);
}
.services-cta .btn{
  border-color:var(--ink);
  color:var(--ink);
}
.services-cta .btn:hover{
  background:var(--ink);
  color:var(--paper);
}
.services-cta .text-link:hover{
  color:var(--ink);
}

/* Keep the orange CTA visually separate from the footer */
.services-cta + footer{
  border-top:0;
}


/* =========================================================
   PORTFOLIO / SELECTED WORK PAGE
   Large, image-led, editorial and immersive
   ========================================================= */
.portfolio-hero{
  position:relative;
  overflow:hidden;
  background:#1c1c1c;
  color:var(--paper);
  padding:170px 0 110px;
  min-height:760px;
  display:flex;
  align-items:flex-end;
}
.portfolio-hero-marquee{
  position:absolute;
  top:92px;
  left:0;
  width:100%;
  overflow:hidden;
  opacity:.055;
  pointer-events:none;
  white-space:nowrap;
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:portfolioMarquee 28s linear infinite;
}
.marquee-track span{
  display:block;
  font-size:clamp(8rem,18vw,19rem);
  line-height:.75;
  font-weight:800;
  letter-spacing:-.075em;
  padding-right:.2em;
}
@keyframes portfolioMarquee{to{transform:translateX(-33.333%)}}
.portfolio-hero-grid{
  position:relative;
  z-index:1;
  width:100%;
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:80px;
  align-items:end;
}
.portfolio-hero h1{
  font-size:clamp(5rem,11vw,11rem);
  line-height:.8;
  letter-spacing:-.078em;
  margin:18px 0 0;
}
.portfolio-hero h1 em{
  font-family:Georgia,serif;
  font-weight:400;
}
.portfolio-hero .eyebrow{color:var(--orange)}
.portfolio-hero-copy .lead{
  font-size:clamp(1.35rem,2.25vw,2rem);
  line-height:1.3;
  margin:0 0 22px;
}
.portfolio-hero-copy>p:not(.lead){
  color:rgba(243,241,236,.65);
  line-height:1.7;
}
.portfolio-hero-copy .text-link{
  display:inline-block;
  margin-top:28px;
  color:var(--paper);
  text-decoration:none;
  border-bottom:1px solid rgba(243,241,236,.35);
  padding-bottom:4px;
}
.portfolio-hero-copy .text-link:hover{color:var(--orange);border-color:var(--orange)}

.portfolio-featured{
  background:var(--paper);
  padding:115px 0 125px;
}
.featured-grid{
  display:grid;
  grid-template-columns:1.45fr .75fr;
  grid-template-rows:auto auto;
  gap:22px;
  margin-top:45px;
}
.featured-work{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  text-align:left;
  color:inherit;
  cursor:pointer;
  min-width:0;
}
.featured-main{grid-row:1 / span 2}
.featured-image{
  position:relative;
  overflow:hidden;
  background:#dedbd4;
  min-height:0;
}
.featured-main .featured-image{aspect-ratio:1.08/1}
.featured-side .featured-image{aspect-ratio:1.52/1}
.featured-wide .featured-image{aspect-ratio:1.52/1}
.featured-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .75s cubic-bezier(.2,.7,.2,1);
}
.featured-work:hover .featured-image img{transform:scale(1.035)}
.project-meta{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:baseline;
  padding:14px 2px 0;
}
.project-meta>span:first-child{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.project-meta h2{
  font-size:clamp(1.2rem,2vw,1.8rem);
  margin:0;
  letter-spacing:-.03em;
}
.project-arrow{font-size:1.2rem;color:var(--orange)}

.portfolio-gallery-section{
  background:#171717;
  color:var(--paper);
  padding:120px 0 135px;
  scroll-margin-top:85px;
}
.portfolio-gallery-section .section-kicker{color:rgba(243,241,236,.48)}
.portfolio-gallery-head{
  display:grid;
  grid-template-columns:1.15fr .55fr;
  gap:80px;
  align-items:end;
}
.portfolio-gallery-head h2{
  font-size:clamp(3.5rem,7vw,7rem);
  line-height:.88;
  letter-spacing:-.06em;
  margin:18px 0 0;
}
.portfolio-gallery-head>p{
  color:rgba(243,241,236,.62);
  line-height:1.75;
  font-size:1.03rem;
}
.portfolio-filters{
  position:sticky;
  top:78px;
  z-index:12;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:58px 0 50px;
  padding:12px;
  background:rgba(23,23,23,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);
  width:max-content;
  max-width:100%;
}
.portfolio-filter{
  min-height:42px;
  border:1px solid rgba(255,255,255,.14);
  background:transparent;
  color:rgba(243,241,236,.74);
  padding:9px 16px;
  cursor:pointer;
  transition:.25s ease;
}
.portfolio-filter:hover,
.portfolio-filter:focus-visible,
.portfolio-filter.active{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--ink);
}
.portfolio-filter:focus-visible{
  outline:2px solid var(--paper);
  outline-offset:2px;
}

.editorial-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:22px;
  align-items:start;
}
.portfolio-piece{
  grid-column:span 4;
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  padding:0;
  cursor:pointer;
  min-width:0;
  transition:opacity .28s ease,transform .28s ease;
}
.portfolio-piece.portfolio-wide{grid-column:span 8}
.portfolio-piece.portfolio-tall{grid-column:span 5}
.portfolio-piece.portfolio-feature{grid-column:span 12}
.portfolio-piece.is-filtered-out{
  display:none;
}
.piece-media{
  display:block;
  position:relative;
  overflow:hidden;
  background:#262626;
  aspect-ratio:1.5/1;
}
.portfolio-piece.portfolio-wide .piece-media{aspect-ratio:1.75/1}
.portfolio-piece.portfolio-tall .piece-media{aspect-ratio:.95/1}
.portfolio-piece.portfolio-feature .piece-media{aspect-ratio:2.05/1}
.piece-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.001);
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .35s ease;
  will-change:transform;
}
.portfolio-piece:hover .piece-media img{transform:scale(1.04)}
.piece-info{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:13px;
  align-items:center;
  padding:13px 0 32px;
  border-top:1px solid rgba(255,255,255,.12);
}
.piece-category{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.075em;
  color:rgba(243,241,236,.45);
}
.piece-info strong{
  font-size:1rem;
  font-weight:600;
}
.piece-arrow{color:var(--orange)}
.portfolio-piece:hover .piece-arrow{transform:translate(2px,-2px)}
.piece-arrow{transition:transform .25s ease}

.portfolio-interlude{
  background:var(--paper-2);
  color:var(--ink);
  padding:115px 0;
}
.portfolio-interlude p{
  font-size:clamp(2.8rem,6vw,6.5rem);
  line-height:.98;
  letter-spacing:-.055em;
  max-width:1350px;
  margin:0;
}
.portfolio-cta{
  background:var(--orange);
  color:var(--ink);
  padding:120px 0;
}
.portfolio-cta h2{
  font-size:clamp(3.5rem,7vw,7.4rem);
  line-height:.9;
  letter-spacing:-.06em;
  margin:20px 0 0;
}
.portfolio-cta h2 em{font-family:Georgia,serif;font-weight:400}
.portfolio-cta .section-kicker,
.portfolio-cta .cta-side p,
.portfolio-cta .text-link{color:rgba(22,22,22,.72)}
.portfolio-cta .btn{border-color:var(--ink);color:var(--ink)}
.portfolio-cta .btn:hover{background:var(--ink);color:var(--paper)}
.portfolio-cta .text-link{
  display:block;
  margin-top:22px;
  text-decoration:none;
}
.portfolio-cta .text-link:hover{color:var(--ink)}

/* Lightbox */
.portfolio-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(10,10,10,.96);
  color:var(--paper);
  display:none;
  align-items:center;
  justify-content:center;
  padding:68px 80px 36px;
}
.portfolio-lightbox.open{display:flex}
.lightbox-stage{
  width:min(1500px,100%);
  max-height:calc(100vh - 100px);
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:38px;
  align-items:center;
}
.lightbox-image-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}
.lightbox-image{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 120px);
  width:auto;
  height:auto;
  object-fit:contain;
}
.lightbox-caption{align-self:end;padding-bottom:18px}
.lightbox-category{
  display:block;
  color:var(--orange);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:10px;
}
.lightbox-title{
  font-size:clamp(2rem,4vw,4rem);
  line-height:.95;
  letter-spacing:-.05em;
  margin:0 0 18px;
}
.lightbox-description{color:rgba(243,241,236,.62);line-height:1.65}
.lightbox-counter{display:block;margin-top:28px;color:rgba(243,241,236,.38)}
.lightbox-close,
.lightbox-nav{
  position:absolute;
  z-index:2;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(20,20,20,.6);
  color:var(--paper);
  width:48px;
  height:48px;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:1.25rem;
}
.lightbox-close{top:24px;right:26px;font-size:1.8rem}
.lightbox-prev{left:22px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:22px;top:50%;transform:translateY(-50%)}
.lightbox-close:hover,.lightbox-nav:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
body.lightbox-open{overflow:hidden}

@media(max-width:1050px){
  .portfolio-hero-grid,.portfolio-gallery-head{grid-template-columns:1fr;gap:38px}
  .featured-grid{grid-template-columns:1fr 1fr}
  .featured-main{grid-column:1 / -1;grid-row:auto}
  .featured-main .featured-image{aspect-ratio:1.65/1}
  .portfolio-piece,.portfolio-piece.portfolio-tall{grid-column:span 6}
  .portfolio-piece.portfolio-wide{grid-column:span 12}
  .lightbox-stage{grid-template-columns:1fr}
  .lightbox-caption{display:grid;grid-template-columns:1fr auto;gap:7px 18px;align-items:end}
  .lightbox-title,.lightbox-description{grid-column:1 / -1}
}
@media(max-width:700px){
  .portfolio-hero{padding:140px 0 80px;min-height:0}
  .portfolio-hero h1{font-size:clamp(4.2rem,20vw,7.5rem)}
  .portfolio-hero-marquee{top:88px}
  .portfolio-featured,.portfolio-gallery-section{padding:80px 0}
  .featured-grid{grid-template-columns:1fr}
  .featured-main,.featured-side,.featured-wide{grid-column:auto}
  .featured-main .featured-image,.featured-side .featured-image,.featured-wide .featured-image{aspect-ratio:1.35/1}
  .portfolio-filters{
    top:68px;
    width:calc(100% + 2 * var(--pad));
    max-width:none;
    margin-left:calc(-1 * var(--pad));
    padding-left:var(--pad);
    padding-right:var(--pad);
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .portfolio-filters::-webkit-scrollbar{display:none}
  .portfolio-filter{flex:0 0 auto}
  .editorial-grid{display:block}
  .portfolio-piece{display:block;width:100%;margin-bottom:20px}
  .portfolio-piece.is-filtered-out{display:none}
  .piece-media,.portfolio-piece.portfolio-wide .piece-media,.portfolio-piece.portfolio-tall .piece-media,.portfolio-piece.portfolio-feature .piece-media{aspect-ratio:1.35/1}
  .portfolio-interlude{padding:80px 0}
  .portfolio-interlude p{font-size:clamp(2.5rem,11vw,4.6rem)}
  .portfolio-cta{padding:85px 0}
  .portfolio-lightbox{padding:72px 18px 24px}
  .lightbox-stage{max-height:none}
  .lightbox-image{max-height:62vh}
  .lightbox-prev{left:12px;bottom:12px;top:auto;transform:none}
  .lightbox-next{right:12px;bottom:12px;top:auto;transform:none}
  .lightbox-caption{display:block;padding:0 52px 44px}
}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .featured-image img,.piece-media img{transition:none}
}


/* =========================================================
   PORTFOLIO HERO — ALIGN WITH HOME / SERVICES
   ========================================================= */
.portfolio-hero{
  display:block;
  padding:170px 0 110px;
  min-height:auto;
}

.portfolio-hero .portfolio-hero-grid{
  width:min(100%, var(--max));
  margin-inline:auto;
  padding-inline:var(--pad);
  min-height:560px;
  align-items:end;
}

/* Keep the decorative marquee, but contain it to the same centered width */
.portfolio-hero-marquee{
  left:50%;
  width:min(100%, var(--max));
  transform:translateX(-50%);
  padding-inline:var(--pad);
  box-sizing:border-box;
}

.portfolio-hero-marquee .marquee-track{
  max-width:100%;
}

/* Avoid visually pushing the hero beyond the main site frame */
.portfolio-hero-marquee .marquee-track span{
  font-size:clamp(7rem,14vw,15rem);
}

@media(max-width:1050px){
  .portfolio-hero .portfolio-hero-grid{
    min-height:500px;
  }
}

@media(max-width:700px){
  .portfolio-hero{
    padding:140px 0 80px;
  }
  .portfolio-hero .portfolio-hero-grid{
    min-height:0;
  }
  .portfolio-hero-marquee{
    padding-inline:var(--pad);
  }
}


/* =========================================================
   PERSISTENT SITE HEADER
   Logo + navigation remain available while scrolling.
   ========================================================= */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  padding:22px 0;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:
    padding .28s ease,
    background-color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    backdrop-filter .28s ease;
}

.site-header.scrolled,
.menu-open .site-header{
  padding:12px 0;
  background:rgba(22,22,22,.90);
  border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 8px 28px rgba(0,0,0,.16);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

.site-header .brand img{
  transition:width .28s ease;
}

.site-header.scrolled .brand img{
  width:104px;
}

/* Fixed navigation should not cover in-page destinations. */
html{
  scroll-padding-top:88px;
}

/* Keep sticky portfolio filters comfortably below the persistent header. */
.portfolio-filters{
  top:76px;
}

@media(max-width:980px){
  .site-header{
    padding:16px 0;
  }
  .site-header.scrolled,
  .menu-open .site-header{
    padding:10px 0;
  }
  html{
    scroll-padding-top:72px;
  }
}

@media(max-width:700px){
  .portfolio-filters{
    top:64px;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-header,
  .site-header .brand img{
    transition:none;
  }
}


/* =========================================================
   ABOUT PAGE
   ========================================================= */
.about-page-hero{background:#1c1c1c;color:var(--paper);padding:150px 0 0;overflow:hidden}
.about-page-hero-grid{display:grid;grid-template-columns:1.2fr .55fr;gap:80px;align-items:end;min-height:720px}
.about-page-title{padding-bottom:100px}
.about-page-title .eyebrow{color:var(--orange)}
.about-page-title h1{font-size:clamp(4.8rem,10vw,10rem);line-height:.81;letter-spacing:-.075em;margin:18px 0 0}
.about-page-title h1 em{font-family:Georgia,serif;font-weight:400}
.about-page-visual{height:620px;overflow:hidden}
.about-page-visual img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block}
.about-intro{background:var(--paper);padding:120px 0}
.about-intro-grid{display:grid;grid-template-columns:.4fr 1.15fr .7fr;gap:55px;align-items:start}
.about-statement p{font-size:clamp(2.2rem,4.4vw,4.6rem);line-height:1.02;letter-spacing:-.045em;margin:0}
.about-body p{font-size:1.03rem;line-height:1.8;color:var(--muted);margin:0 0 22px}
.about-facts{background:var(--orange);padding:0}
.facts-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.fact{padding:55px 40px 55px 0;border-right:1px solid rgba(22,22,22,.25)}
.fact:not(:first-child){padding-left:40px}
.fact:last-child{border-right:0}
.fact-value{display:block;font-size:clamp(3.2rem,6vw,6rem);font-weight:700;line-height:.9;letter-spacing:-.055em}
.fact-label{display:block;margin-top:15px;font-size:.9rem;color:rgba(22,22,22,.68)}
.about-philosophy{background:#171717;color:var(--paper);padding:120px 0}
.philosophy-grid{display:grid;grid-template-columns:.78fr 1.1fr;gap:90px;align-items:center}
.philosophy-image{overflow:hidden;aspect-ratio:1/1}
.philosophy-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.philosophy-image:hover img{transform:scale(1.025)}
.philosophy-copy .section-kicker{color:rgba(243,241,236,.5)}
.philosophy-copy h2{font-size:clamp(3rem,6vw,6.2rem);line-height:.91;letter-spacing:-.06em;margin:22px 0 35px}
.philosophy-copy h2 em{font-family:Georgia,serif;font-weight:400}
.philosophy-copy p{color:rgba(243,241,236,.66);line-height:1.78;font-size:1.03rem}
.philosophy-copy .btn{margin-top:18px;border-color:var(--paper);color:var(--paper)}
.philosophy-copy .btn:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.about-values{background:var(--paper-2);padding:120px 0}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:50px;border-top:1px solid var(--line)}
.value-card{padding:32px 28px 20px 0;border-right:1px solid var(--line);min-height:260px}
.value-card:not(:first-child){padding-left:28px}
.value-card:last-child{border-right:0}
.value-card>span{color:var(--orange);font-size:.8rem}
.value-card h3{font-size:1.7rem;margin:36px 0 16px}
.value-card p{color:var(--muted);line-height:1.65;font-size:.94rem}
.about-cta{background:var(--orange);padding:120px 0}
.about-cta h2{font-size:clamp(3.5rem,7vw,7.4rem);line-height:.9;letter-spacing:-.06em;margin:20px 0 0}
.about-cta h2 em{font-family:Georgia,serif;font-weight:400}
.about-cta .section-kicker,.about-cta .cta-side p,.about-cta .text-link{color:rgba(22,22,22,.7)}
.about-cta .btn{border-color:var(--ink);color:var(--ink)}
.about-cta .btn:hover{background:var(--ink);color:var(--paper)}
.about-cta .text-link{display:block;margin-top:22px;text-decoration:none;color:rgba(22,22,22,.7)}
.about-cta .text-link:hover{color:var(--ink)}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-page-hero{background:#1c1c1c;color:var(--paper);padding:150px 0 0;overflow:hidden}
.contact-page-hero-grid{display:grid;grid-template-columns:1.1fr .5fr;gap:80px;align-items:end;min-height:720px}
.contact-page-title{padding-bottom:90px}
.contact-page-title .eyebrow{color:var(--orange)}
.contact-page-title h1{font-size:clamp(5rem,11vw,11rem);line-height:.8;letter-spacing:-.08em;margin:18px 0 30px}
.contact-page-title h1 em{font-family:Georgia,serif;font-weight:400}
.contact-page-title>p{max-width:660px;font-size:1.18rem;line-height:1.65;color:rgba(243,241,236,.66)}
.contact-page-visual{height:620px;overflow:hidden}
.contact-page-visual img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.contact-details{background:var(--orange);padding:45px 0 55px}
.contact-details-grid{display:grid;grid-template-columns:.55fr 1fr 1fr 1fr;gap:0;align-items:stretch}
.contact-details .section-kicker{padding:20px 35px 0 0;color:rgba(22,22,22,.62)}
.contact-detail{color:var(--ink);text-decoration:none;padding:20px 32px;border-left:1px solid rgba(22,22,22,.22);display:grid;grid-template-columns:1fr auto;gap:8px 15px;align-content:start}
.contact-detail>span{grid-column:1/-1;text-transform:uppercase;font-size:.72rem;letter-spacing:.08em;color:rgba(22,22,22,.6)}
.contact-detail strong{font-size:clamp(1.1rem,1.8vw,1.5rem);line-height:1.25}
.contact-detail i{font-style:normal;align-self:start}
a.contact-detail:hover strong{text-decoration:underline;text-underline-offset:4px}
.contact-form-section{background:var(--paper);padding:120px 0}
.contact-form-grid{display:grid;grid-template-columns:.72fr 1.15fr;gap:100px;align-items:start}
.contact-form-intro{position:sticky;top:130px}
.contact-form-intro h2{font-size:clamp(3.1rem,6vw,6.1rem);line-height:.91;letter-spacing:-.06em;margin:22px 0 28px}
.contact-form-intro h2 em{font-family:Georgia,serif;font-weight:400}
.contact-form-intro p{color:var(--muted);line-height:1.75;max-width:520px}
.project-form{display:grid;gap:28px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form-field{display:grid;gap:9px}
.form-field>span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.form-field input,.form-field select,.form-field textarea{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:1rem;padding:12px 0 14px;outline:none;transition:border-color .2s ease}
.form-field textarea{resize:vertical;min-height:150px;border:1px solid var(--line);padding:16px}
.form-field select{cursor:pointer}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--orange)}
.form-field input::placeholder,.form-field textarea::placeholder{color:#a29c96}
.form-submit-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:8px}
.form-submit-row small{color:var(--muted)}
.form-submit-row small a{color:var(--ink)}
.form-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-status{display:none;padding:14px 16px;border:1px solid var(--line)}
.form-status.visible{display:block}
.form-status.success{border-color:#54775a;background:#eef5ef;color:#32533a}
.form-status.error{border-color:#9b4e43;background:#faefed;color:#7b332a}
.contact-close{background:#171717;color:var(--paper);padding:110px 0}
.contact-close p{font-size:clamp(3.1rem,7vw,7.5rem);line-height:.95;letter-spacing:-.06em;max-width:1300px;margin:0}

@media(max-width:1000px){
  .about-page-hero-grid,.contact-page-hero-grid{grid-template-columns:1fr .55fr;gap:40px}
  .about-intro-grid{grid-template-columns:1fr 1fr}
  .about-intro-grid>.section-kicker{grid-column:1/-1}
  .philosophy-grid,.contact-form-grid{grid-template-columns:1fr;gap:60px}
  .contact-form-intro{position:static}
  .values-grid{grid-template-columns:1fr 1fr}
  .value-card:nth-child(2){border-right:0}
  .value-card:nth-child(3),.value-card:nth-child(4){border-top:1px solid var(--line)}
  .contact-details-grid{grid-template-columns:1fr 1fr}
  .contact-details .section-kicker{grid-column:1/-1;padding-bottom:20px}
  .contact-detail:nth-of-type(2){border-left:0}
}
@media(max-width:700px){
  .about-page-hero,.contact-page-hero{padding-top:125px}
  .about-page-hero-grid,.contact-page-hero-grid{grid-template-columns:1fr;min-height:0}
  .about-page-title,.contact-page-title{padding-bottom:20px}
  .about-page-title h1,.contact-page-title h1{font-size:clamp(4rem,19vw,7rem)}
  .about-page-visual,.contact-page-visual{height:460px;width:78%;margin-left:auto}
  .about-intro,.about-philosophy,.about-values,.about-cta,.contact-form-section{padding:80px 0}
  .about-intro-grid{grid-template-columns:1fr;gap:35px}
  .facts-grid{grid-template-columns:1fr}
  .fact,.fact:not(:first-child){padding:32px 0;border-right:0;border-bottom:1px solid rgba(22,22,22,.2)}
  .fact:last-child{border-bottom:0}
  .values-grid{grid-template-columns:1fr}
  .value-card,.value-card:not(:first-child){padding:28px 0;border-right:0;border-top:1px solid var(--line);min-height:0}
  .value-card:first-child{border-top:0}
  .contact-details-grid{grid-template-columns:1fr}
  .contact-detail,.contact-detail:nth-of-type(2){border-left:0;border-top:1px solid rgba(22,22,22,.2);padding:22px 0}
  .field-grid{grid-template-columns:1fr}
  .contact-close{padding:80px 0}
}


/* =========================================================
   SHARED HERO MARQUEE — SERVICES / ABOUT / CONTACT
   Matches the Selected Work hero treatment.
   ========================================================= */
.services-hero.page-hero,
.about-page-hero,
.contact-page-hero{
  position:relative;
}

.hero-marquee{
  position:absolute;
  top:92px;
  left:50%;
  width:min(100%, var(--max));
  transform:translateX(-50%);
  padding-inline:var(--pad);
  box-sizing:border-box;
  overflow:hidden;
  opacity:.055;
  pointer-events:none;
  white-space:nowrap;
  z-index:0;
}

.hero-marquee-track{
  display:flex;
  width:max-content;
  max-width:100%;
  animation:portfolioMarquee 28s linear infinite;
}

.hero-marquee-track span{
  display:block;
  font-size:clamp(7rem,14vw,15rem);
  line-height:.75;
  font-weight:800;
  letter-spacing:-.075em;
  padding-right:.2em;
}

.services-hero.page-hero > .wrap,
.about-page-hero > .wrap,
.contact-page-hero > .wrap{
  position:relative;
  z-index:1;
}

@media(max-width:700px){
  .hero-marquee{
    top:88px;
    padding-inline:var(--pad);
  }
  .hero-marquee-track span{
    font-size:clamp(6rem,20vw,9rem);
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-marquee-track{
    animation:none;
  }
}