/* Essential copy and room for the existing North Code identity. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-content{padding-top:clamp(110px,18vh,205px)}
.hero-subtitle{max-width:345px;margin-top:27px;color:#bcbcbc;font-size:16px;line-height:1.55}
.hero-finale .impact-title{margin:0;color:var(--white);font-size:clamp(65px,7.2vw,116px);line-height:1.02}
.hero-explore{font-size:14px;padding-block:10px;border-bottom:1px solid #888;transition:color .35s,border-color .35s}.hero-explore:hover{color:white;border-color:white}
.service summary{grid-template-columns:1fr auto;padding:21px 10px 21px 0;gap:22px}
.service-body{padding:0 20px 23px 0;max-width:590px}.service-body>p{font-size:16px;line-height:1.55;color:#bfbfbf}
.service-features{display:grid;grid-template-columns:1fr 1fr;gap:9px 23px;margin-block:20px;font-size:14px;line-height:1.45;color:#dedede}
.service-features li{padding-left:12px;border-left:1px solid #666}
.service-body>.service-note{font-size:14px;line-height:1.5;color:#999;max-width:430px}
.service-body .text-link{margin-top:15px}
.service-toggle{height:1px;width:25px;background:#8c8c8c;transition:width .6s var(--ease),background .5s}
.service[open] .service-toggle,.service summary:hover .service-toggle{width:42px;background:#eee}
.text-link{margin-top:19px}

/* The complete introduction remains real, selectable text. */
.about{padding-block:115px 100px}
.about-grid{display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(60px,10vw,160px);max-width:1140px;margin-inline:auto}
.brand-world{position:sticky;top:calc(var(--header) + 100px);width:30%;max-width:330px;aspect-ratio:1.05;flex:none;min-width:0;margin-top:25px;perspective:950px}
.brand-world>.brand-fallback{position:absolute;inset:16% 0 auto;width:100%;height:auto;aspect-ratio:347/208;object-fit:contain;mix-blend-mode:multiply}
#brand-scene{display:block;width:100%;height:100%;opacity:0;transform:rotateX(4deg) rotateY(-8deg);transform-origin:center}
.brand-world.is-rendered #brand-scene{opacity:1}.brand-world.is-rendered .brand-fallback{visibility:hidden}
.about-copy{flex:1;max-width:620px}.about-copy h2{font-size:clamp(39px,4vw,64px);margin-bottom:28px}.about-copy>p{font-size:18px;line-height:1.65;max-width:540px;color:#686868}.about-copy>.about-lead{font-size:clamp(21px,2vw,27px);line-height:1.4;color:#404040;max-width:465px;margin-bottom:23px}
.about-story-content{max-width:540px;padding-top:30px;font-size:18px;line-height:1.65;color:#686868}.about-story-content p+p{margin-top:23px}.story-signature{color:#333}.story-signature>span{font-size:14px;color:#777}

/* A compact, continuous horizontal process. */
.process{padding-block:35px 85px}
.process h2{font-size:clamp(30px,3vw,43px);margin-bottom:12px}
.process-intro{font-size:16px;color:#777;margin-bottom:20px}
.process-track{max-width:1120px}
.process-tabs{position:relative;display:flex;border-bottom:1px solid #c5c5c5;--active-step:0}
.process-tabs::after{content:'';position:absolute;bottom:-1px;left:0;width:25%;height:1px;background:#343434;transform:translateX(calc(var(--active-step) * 100%));transition:transform .65s var(--ease);pointer-events:none}
.process-tabs button{flex:1;min-width:0;padding:20px 0 22px;background:none;border:0;text-align:left;font-size:clamp(24px,2.5vw,34px);letter-spacing:-.035em;color:#858585;transition:color .4s}
.process-tabs button[aria-selected=true],.process-tabs button:hover{color:#222}.process-tabs button:focus-visible{outline-offset:-4px}
.process-panels{min-height:68px;padding-top:24px}.process-panels p{font-size:17px;line-height:1.5;color:#686868}.process-panels [hidden]{display:none}

/* Conversation is the focal point; the slogan is a quiet signature. */
.closing{position:relative;isolation:isolate;overflow:hidden;padding-block:90px 80px;min-height:800px}
.closing-content{display:flex;flex-direction:column;gap:70px}
.closing-art{position:absolute;inset:0;z-index:-2;overflow:hidden;opacity:.28}.closing-art img{width:100%;height:125%;object-fit:cover;object-position:50% 42%;filter:grayscale(1);will-change:transform}
.closing::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#11111178,transparent 40%,#111111ee),linear-gradient(90deg,#171717e3,#17171735 85%);z-index:-1}
.closing-signature{font-size:16px;color:#a7a7a7;letter-spacing:.015em}
.contact-area{position:relative;max-width:1120px;width:100%}
.closing h2{font-size:clamp(76px,9.2vw,142px);line-height:1.02;letter-spacing:-.055em}.closing h2 span{color:#f2f2f2}
.contact-intro{max-width:580px;font-size:20px;line-height:1.65;color:#b7b7b7;margin-top:32px}
.contact-links{display:grid;grid-template-columns:auto auto auto minmax(0,1fr);align-items:center;gap:clamp(20px,3.5vw,50px);border-top:1px solid #ffffff3d;padding-top:23px;margin-top:45px}
.contact-links>.scene-cta{min-width:0;gap:30px}.contact-links>.contact-social{display:flex;align-items:center;min-height:56px;white-space:nowrap}.contact-links>.contact-email{display:block;align-content:center;justify-self:end;text-align:right;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.contact-socials{display:flex;align-items:center;gap:40px}.contact-social{position:relative;display:block;min-height:48px;padding:14px 0;font-size:18px;isolation:isolate;transition:color .4s}
.contact-social::after{content:'';height:1px;position:absolute;bottom:6px;left:0;width:100%;background:#999;transform:scaleX(.25);transform-origin:left;transition:transform .6s var(--ease)}.contact-social:hover::after{transform:scaleX(1)}.contact-social:hover{color:#aaa}

/* Useful navigation and official channels in the expanded footer. */
.site-footer{padding-block:70px 28px}
.footer-main{display:grid;grid-template-columns:1.35fr 1fr .8fr;gap:65px;align-items:start}
.site-footer .brand{transform:none;margin:0;justify-self:start}
.footer-nav p{font-size:14px;color:#777;margin-bottom:18px}.footer-nav a{display:block;width:fit-content;padding-block:5px;font-size:16px;line-height:1.6;transition:color .3s}.footer-nav a:hover{color:#888}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:65px;padding-top:24px;border-top:1px solid #ccc}.footer-bottom p{font-size:13px;line-height:1.6;color:#777}.footer-bottom>a{font-size:14px;padding-block:8px;border-bottom:1px solid #aaa;flex:none}
.showroom-cta{justify-content:flex-end}

@media(max-width:1100px){.service h3{font-size:40px}.service summary{grid-template-columns:1fr auto}.about-grid{gap:65px}.footer-main{gap:45px}}
@media(max-width:900px){.about{padding-block:90px 70px}.about-grid{gap:45px}.brand-world{width:31%;max-width:270px}.about-copy h2{font-size:42px}.about-copy>p,.about-story-content{font-size:17px}.closing{min-height:0;padding-block:80px}.closing-content{gap:60px}.closing h2{font-size:clamp(70px,10vw,100px)}.footer-main{grid-template-columns:1.15fr 1fr .7fr;gap:30px}.site-footer .brand{transform:scale(.85);transform-origin:left top}.showroom-cta{align-items:center;justify-content:flex-end}}
@media(max-width:700px){
  .hero-scroll{height:255svh}.hero-stage{min-height:0}
  .hero-content{padding-top:clamp(108px,21svh,200px)}.hero-intro{width:58%}
  h1{font-size:clamp(26px,7.2vw,48px);line-height:1.04;letter-spacing:-.05em}
  .hero-subtitle{font-size:14px;line-height:1.55;max-width:235px;margin-top:20px}
  .hero-finale{top:28%;max-width:56%}.hero-finale .impact-title{font-size:clamp(29px,8vw,54px)}.hero-controls{align-items:center}
  .services-composition{grid-template-columns:minmax(0,.64fr) minmax(0,1.36fr);gap:18px;align-items:start}
  .service-image-wrap{height:clamp(230px,40svh,350px);aspect-ratio:auto}
  .service summary{grid-template-columns:1fr auto;padding-block:19px;gap:8px}
  .service h3{font-size:clamp(23px,6.2vw,34px)}.service-toggle{width:15px}.service[open] .service-toggle{width:22px}
  .service summary:hover{padding-left:0;padding-right:10px;background:none}.service summary:hover h3{transform:none}
  .service-body{padding:0 0 24px;max-width:none}.service-body>p{font-size:16px;line-height:1.55}
  .service-features{grid-template-columns:1fr;gap:10px;margin-block:22px;font-size:14px}
  .about{padding-block:75px 65px}.about-grid{flex-direction:row;gap:16px;align-items:flex-start;margin-top:0}
  .about-copy{width:auto;min-width:0;max-width:none}.about-copy h2{font-size:clamp(25px,6.7vw,40px);margin-bottom:24px}
  .about-copy>.about-lead{font-size:clamp(18px,4.6vw,23px);max-width:none}
  .about-copy>p,.about-story-content{font-size:16px;line-height:1.65}
  .brand-world{position:sticky;top:calc(var(--header) + 18svh);width:29%;max-width:180px;align-self:flex-start;margin:24px 0 0}
  .about-story-content{padding-top:26px}.about-story-content p+p{margin-top:24px}
  .process{padding-block:15px 60px}.process h2{font-size:31px;margin-bottom:12px}.process-intro{font-size:15px;margin-bottom:16px}.process-tabs button{font-size:clamp(15px,4.2vw,23px);padding-block:18px}.process-panels{padding-top:20px;min-height:72px}.process-panels p{font-size:16px}
  .closing{padding-block:65px 60px}.closing-content{gap:55px}.closing-signature{font-size:14px}.closing h2{font-size:clamp(60px,17vw,105px);line-height:1.04}.closing-art img{object-position:50% 42%}.contact-intro{font-size:17px;line-height:1.6;margin-top:27px;max-width:420px}.contact-links{margin-top:32px;padding-top:18px}.contact-socials{gap:35px}.contact-social{font-size:17px}
  .site-footer{padding-block:52px 24px}.footer-main{grid-template-columns:1.1fr 1fr;gap:36px 30px}.site-footer .brand{grid-column:1/-1;transform:none}.footer-nav p{margin-bottom:13px}.footer-nav a{font-size:15px}.footer-bottom{display:block;margin-top:40px;padding-top:23px}.footer-bottom p{font-size:12px}.footer-bottom>a{display:inline-block;margin-top:17px}
}
@media(max-width:400px){:root{--gutter:18px}.services-composition{gap:14px}.about-grid{gap:12px}.process h2{font-size:28px}.closing h2{font-size:56px}.footer-main{gap:32px 23px}}
/* Same four-contact row on smaller screens, with compact, readable spacing. */
@media(max-width:700px){
  .contact-links{grid-template-columns:minmax(0,1fr) max-content max-content minmax(0,1fr);gap:clamp(6px,1.8vw,12px)}
  .contact-links>.scene-cta,.contact-links>.contact-social{font-size:clamp(.75rem,3.1vw,.875rem);line-height:1.35;min-height:56px}
  .contact-links>.scene-cta{padding:10px 6px;gap:0;justify-content:center;text-align:center;overflow-wrap:normal}
  .contact-links>.scene-cta .cta-line{display:none}
  .contact-links>.contact-social{padding-block:10px}
}
@media(max-height:730px) and (max-width:700px){.hero-content{padding-top:clamp(92px,18svh,132px)}.hero-subtitle{margin-top:16px}.hero-finale .impact-title{font-size:clamp(29px,8vw,54px)}}
@media(max-height:539px){.hero-stage{min-height:0}.hero-content{padding-top:34px}h1{font-size:clamp(26px,4.8vw,42px)}.hero-subtitle{margin-top:16px;font-size:14px}.hero-finale .impact-title{font-size:clamp(29px,5.2vw,47px)}}
@media(min-width:901px) and (max-height:850px){.is-animated .services{padding-block:28px}.service summary{padding-block:18px}.service-body{padding-bottom:20px}.service-features{margin-block:15px;gap:7px 20px}}
@media(prefers-reduced-motion:reduce){.brand-world{position:relative;top:0}.process-tabs::after{transition:none}.about-story-content{animation:none!important}}
.motion-paused .process-tabs::after{transition:none!important}

/* Breathing room after the hero, before services enter the viewport. */
.hero-services-gap{height:clamp(240px,48svh,560px);background:linear-gradient(180deg,#151515,#202020)}

/* Mobile service photography keeps the complete landscape composition. */
@media(max-width:900px){
  .services-composition{grid-template-columns:minmax(0,1fr);gap:24px}
  .services .service-visual,.is-animated .services .service-visual{position:relative;top:auto;width:100%;min-width:0;perspective:none}
  .service .service-visual{margin:0 0 22px}
  .services .service-image-wrap{height:auto;aspect-ratio:3/2;transform:none;will-change:auto}
  .services .service-image,.services .service-image.is-active,.services .service-visual:hover .service-image.is-active{object-fit:contain;object-position:center;transform:none;transition:opacity .3s ease}
}