/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;color:var(--cream);overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion: no-preference){
  .hero-bg{animation:hero-settle 5.5s cubic-bezier(.2,.6,.2,1) both}
  @keyframes hero-settle{from{transform:scale(1.07)}to{transform:scale(1)}}
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,9,.74) 0%,rgba(48,27,21,.6) 55%,rgba(48,27,21,.95) 92%,#301B15 100%)}
.hero-content{position:relative;z-index:1;width:100%;padding-top:6rem}
.hero-title{font-size:var(--h-hero);display:flex;flex-direction:column}
.hero-title span:nth-child(2){align-self:center}
.hero-title span:nth-child(3){align-self:flex-end;margin-right:8vw;color:var(--gold)}
.hero-intro{max-width:340px;margin:2.5rem 0 0 52%;display:grid;gap:1.6rem;font-size:.95rem}
@media (max-width:768px){.hero-intro{margin-left:0}}
@media (prefers-reduced-motion: no-preference){
  /* opening cascade: headline lines land one by one, then the intro */
  .hero-title span:nth-child(1){transition-delay:.15s}
  .hero-title span:nth-child(2){transition-delay:.34s}
  .hero-title span:nth-child(3){transition-delay:.53s}
  .hero-intro{transition-delay:.75s}
  /* copy blocks cascade: eyebrow, headline, paragraph, link */
  .about-copy .reveal:nth-child(2),.services-copy .reveal:nth-child(2),.contact-copy .reveal:nth-child(2),
  .portfolio>.reveal:nth-child(2),.props>.reveal:nth-child(2),.journal>.reveal:nth-child(2){transition-delay:.12s}
  .about-copy .reveal:nth-child(3),.services-copy .reveal:nth-child(3),.contact-copy .reveal:nth-child(3){transition-delay:.24s}
  .about-copy .reveal:nth-child(4),.services-copy .reveal:nth-child(4){transition-delay:.36s}
}

/* hidden inscriptions: brand texts written on the room walls, visible only
   where the lamp's light falls (cursor.js drives --wx/--wy per element) */
.wall-text{position:absolute;z-index:0;pointer-events:none;user-select:none;max-width:420px;
  -webkit-mask-image:radial-gradient(circle 24vmin at var(--wx,-999px) var(--wy,-999px),#000 30%,rgba(0,0,0,.5) 65%,transparent 100%);
  mask-image:radial-gradient(circle 24vmin at var(--wx,-999px) var(--wy,-999px),#000 30%,rgba(0,0,0,.5) 65%,transparent 100%)}
.wall-text h4{font-family:var(--font-display);font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:1.15rem;color:var(--gold);margin-bottom:.6rem}
.wall-text p{font-size:.88rem;line-height:1.7;color:var(--sand)}
/* inscriptions live in the large permanently-empty zone beside each
   left-aligned headline (top-right), or the free band under short copy */
/* note: these are position slots — About's band holds the short Brand
   Promise; Portfolio's large void holds the long Mission Statement */
.wall-mission{left:var(--pad);bottom:1.5rem;max-width:340px}
.wall-promise{right:var(--pad);top:11%;max-width:380px}
.wall-vision{left:var(--pad);bottom:1.25rem;max-width:380px}
.wall-strategy{right:var(--pad);top:11%;max-width:300px}
.wall-story{right:var(--pad);top:11%;max-width:300px}
.wall-values{left:var(--pad);bottom:1.5rem;max-width:400px}
@media (max-width:1200px){.wall-text{display:none}}

/* about section — brown room lit by gold and a navy shadow */
.about{display:grid;grid-template-columns:minmax(300px,460px) 1fr;gap:4rem;padding-block:clamp(5rem,12vw,10rem);
  background:radial-gradient(46vmax 46vmax at 84% 8%,rgba(206,161,103,.13),transparent 62%),
             radial-gradient(42vmax 42vmax at 10% 96%,rgba(26,37,48,.5),transparent 60%),
             var(--room)}
.about-copy{display:grid;gap:2rem;align-content:center}
.about-copy h2{font-size:var(--h-section);color:var(--cream)}
.about-copy p:not(.eyebrow){color:color-mix(in srgb,var(--cream) 82%,transparent)}
/* editorial composition: tall lead image, smaller study overlapping its
   lower-right corner, mounted on the room colour */
.about-media{display:grid;grid-template-columns:repeat(12,1fr);align-items:start}
.about-media .reveal-img:first-child{grid-column:1/10}
.about-media .reveal-img:first-child img{height:clamp(420px,44vw,620px)}
.about-media .reveal-img:last-child{grid-column:7/13;margin-top:-24%;z-index:1;border:9px solid var(--sand)}
.about-media .reveal-img:last-child img{height:clamp(180px,19vw,260px)}
.about-media img{width:100%;object-fit:cover}
@media (max-width:900px){
  .about{grid-template-columns:1fr}
  .about-media .reveal-img:first-child{grid-column:1/-1}
  .about-media .reveal-img:last-child{grid-column:4/13;margin-top:-18%}
}

/* portfolio carousel — ink gallery warmed by terracotta and olive light */
.portfolio{padding-block:clamp(4rem,10vw,8rem);display:grid;gap:3rem;
  background:radial-gradient(44vmax 44vmax at 12% 18%,rgba(117,68,54,.32),transparent 62%),
             radial-gradient(40vmax 40vmax at 88% 84%,rgba(108,103,81,.26),transparent 60%),
             var(--room)}
.portfolio h2{font-size:var(--h-section);color:var(--cream)}
.carousel{position:relative;min-height:480px}
.slide{position:absolute;inset:0;display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;opacity:0;transition:opacity .6s ease;pointer-events:none}
.slide.is-active{opacity:1;pointer-events:auto;position:relative}
.slide .frame{height:clamp(380px,52vh,520px)}
@media (prefers-reduced-motion: no-preference){
  .slide.is-active .frame img{animation:slide-in 1.2s cubic-bezier(.2,.6,.2,1) both}
  @keyframes slide-in{from{transform:scale(1.07);opacity:.4}to{transform:scale(1);opacity:1}}
  /* project text rises line by line with each slide */
  .slide.is-active .slide-body>*{animation:rise .7s cubic-bezier(.2,.65,.2,1) both}
  .slide.is-active .slide-body>*:nth-child(2){animation-delay:.08s}
  .slide.is-active .slide-body>*:nth-child(3){animation-delay:.16s}
  .slide.is-active .slide-body>*:nth-child(4){animation-delay:.24s}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}}
}
.slide-body{display:grid;gap:1.2rem;align-content:center}
.slide-body h3{font-size:clamp(1.6rem,3vw,2.6rem);color:var(--cream)}
.slide-meta{font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sand);opacity:.8}
.slide-note{font-size:.85rem;color:var(--sand);opacity:.75}
.carousel-ctrl{display:flex;align-items:center;gap:1rem;justify-content:flex-end}
.carousel-ctrl span{color:var(--gold);letter-spacing:.15em}
.carousel-ctrl button{width:52px;height:52px;border-radius:50%;border:1px solid var(--gold);background:none;color:var(--gold);font-size:1.1rem;cursor:pointer}
.carousel-ctrl button:hover{background:var(--gold);color:var(--ink)}
@media (prefers-reduced-motion: no-preference){
  .carousel-ctrl button{transition:background .3s,color .3s}
}
@media (max-width:900px){.slide{grid-template-columns:1fr}.slide .frame{height:300px}}

/* services section: deep brown warmed by an olive glow — olive as light, not wall */
.services{position:relative;color:var(--cream);padding-block:clamp(4rem,10vw,8rem);
  background:radial-gradient(52vmax 52vmax at 12% 18%,rgba(108,103,81,.4),transparent 62%),
             radial-gradient(40vmax 40vmax at 92% 88%,rgba(206,161,103,.09),transparent 60%),
             #2A1A12}
.services-inner{position:relative;display:grid;grid-template-columns:minmax(280px,400px) 1fr;gap:4rem}
.services-copy{display:grid;gap:1.8rem;align-content:start}
.services-copy h2{font-size:var(--h-section)}
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.svc{background:color-mix(in srgb,var(--cream) 6%,transparent);border:1px solid color-mix(in srgb,var(--sand) 22%,transparent);color:var(--cream);padding:2rem;display:grid;gap:1rem;align-content:start;backdrop-filter:blur(2px)}
.svc span{font-size:.8rem;color:var(--gold);letter-spacing:.15em}
.svc h3{font-size:1.35rem;color:var(--sand)}
.svc p{font-size:.9rem;color:color-mix(in srgb,var(--cream) 78%,transparent)}
.svc:last-child{grid-column:1/-1}
.svc:hover{border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
@media (prefers-reduced-motion: no-preference){.svc{transition:transform .5s cubic-bezier(.2,.65,.2,1),border-color .4s ease}}
@media (max-width:900px){.services-inner{grid-template-columns:1fr}.services-grid{grid-template-columns:1fr}}

/* process — deep brown with a navy dusk; numbers earn their place: a real sequence */
.process{padding-block:clamp(4rem,10vw,8rem);display:grid;gap:3rem;
  background:radial-gradient(50vmax 50vmax at 88% 12%,rgba(40,55,74,.55),transparent 62%),
             radial-gradient(38vmax 38vmax at 8% 92%,rgba(206,161,103,.09),transparent 58%),
             var(--room)}
.process h2{font-size:var(--h-section);color:var(--cream)}
.process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;align-items:start}
.step{display:grid;gap:1rem;padding-top:1.4rem;border-top:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.step>span{font-family:var(--font-display);font-size:clamp(3.2rem,5.5vw,5rem);line-height:1;color:color-mix(in srgb,var(--cream) 12%,transparent)}
.step h3{font-size:1.5rem;color:var(--gold)}
.step p{font-size:.95rem;color:color-mix(in srgb,var(--cream) 82%,transparent)}
@media (max-width:900px){.process-steps{grid-template-columns:1fr}}

/* journal section */
.journal{padding-block:clamp(4rem,10vw,8rem);display:grid;gap:3rem}
.journal h2{font-size:var(--h-section);color:var(--sand)}
/* journal — dark umber room; prints mounted on sand mats */
.journal{background:radial-gradient(42vmax 42vmax at 14% 16%,rgba(211,199,173,.07),transparent 60%),
                    radial-gradient(44vmax 44vmax at 86% 88%,rgba(117,68,54,.3),transparent 62%),
                    var(--room)}
/* varied editorial rhythm: alternating tall/short frames on a staggered baseline */
.journal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;align-items:start}
.journal-grid .frame{border:8px solid var(--sand);background:var(--sand)}
.journal-grid figure:nth-child(1) .frame{height:400px}
.journal-grid figure:nth-child(2){margin-top:4.5rem}
.journal-grid figure:nth-child(2) .frame{height:270px}
.journal-grid figure:nth-child(3){margin-top:1.5rem}
.journal-grid figure:nth-child(3) .frame{height:340px}
.journal-grid figure:nth-child(4){margin-top:6rem}
.journal-grid figure:nth-child(4) .frame{height:300px}
.journal-grid figcaption{font-family:var(--font-display);text-transform:uppercase;font-size:1rem;color:var(--sand);margin-top:1rem}
.journal-grid figcaption::before{content:"";display:block;width:2.2rem;height:1px;background:var(--gold);margin-bottom:.6rem;opacity:.7}
@media (prefers-reduced-motion: no-preference){
  .journal-grid figcaption::before{transition:width .45s cubic-bezier(.2,.65,.2,1)}
  .journal-grid figure:hover figcaption::before{width:3.6rem}
}
@media (max-width:900px){
  .journal-grid{grid-template-columns:repeat(2,1fr)}
  .journal-grid figure{margin-top:0!important}
  .journal-grid figure .frame{height:240px!important}
}

/* contact section — brown room, gold light over the form */
.contact{display:grid;grid-template-columns:minmax(300px,1fr) 1.15fr;gap:clamp(3rem,6vw,6rem);padding-block:clamp(4rem,10vw,8rem);
  background:radial-gradient(44vmax 44vmax at 86% 14%,rgba(206,161,103,.12),transparent 60%),
             radial-gradient(40vmax 40vmax at 6% 88%,rgba(57,54,43,.55),transparent 60%),
             var(--room)}
.contact h2{font-size:clamp(2.2rem,4.2vw,4.2rem);color:var(--cream)}
.contact-copy p:not(.eyebrow){color:color-mix(in srgb,var(--cream) 82%,transparent)}
.contact-form{padding-top:.4rem}
.contact-copy{display:grid;gap:1.6rem;align-content:start}
.contact-form{display:grid;gap:1.8rem;align-content:start}
.contact-form label{display:grid;gap:.4rem;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.contact-form input,.contact-form textarea{border:0;border-bottom:1px solid color-mix(in srgb,var(--sand) 55%,transparent);background:none;padding:.6rem 0;font:inherit;font-size:1rem;color:var(--cream);caret-color:var(--gold)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-bottom-color:var(--gold)}
.contact-form textarea{border:1px solid color-mix(in srgb,var(--sand) 55%,transparent);padding:.8rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.contact-form button{background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer;justify-self:start;color:var(--cream);font:inherit}
@media (max-width:900px){.contact{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}