/* ==========================================================================
   Grafico — Studio (/o-nas/). Phase 7, docs/rebuild/35-STUDIO-PHASE7.md.
   Same universe as the homepage and the services (NIGHT / IVORY / CRIMSON,
   Satoshi, Newsreader Italic as the one human accent, mark-derived geometry),
   composed as an editorial page: typography first, no card grids, no
   portraits (none exist), one architectural use of the mark (hero).
   Tokens, reset, header, footer and .btn-primary live in base.css.
   ========================================================================== */
@layer sections {
.st{background:var(--night);color:var(--ivory);line-height:1.15}
.st p{line-height:1.55}
.st-wrap{max-width:88rem;margin:0 auto;padding:0 var(--edge)}
.st-section{padding:7rem 0}
.st h2{font-weight:800;letter-spacing:-.025em;line-height:1.03;font-size:clamp(1.9rem,4.2vw,3.6rem)}
.st em{font-family:var(--font-human);font-style:italic;font-weight:400;letter-spacing:0}

.st-link{font-weight:500;font-size:.95rem;border-bottom:1px solid currentColor;padding-bottom:.15rem;transition:color .18s ease,border-color .18s ease;display:inline-block}
.st-link--small{font-size:.9rem}
.st-actions{margin-top:2.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.75rem}
.st-swatch{display:inline-block;width:.75rem;height:.75rem;margin-right:.65rem;flex:none;vertical-align:baseline}
.st-swatch--night{background:var(--night);box-shadow:inset 0 0 0 1px rgba(242,239,230,.55)}
.st-swatch--crimson{background:var(--crimson)}
.st-swatch--ivory{background:var(--ivory);box-shadow:inset 0 0 0 1px rgba(13,13,12,.35)}

/* ---------- 1. hero (night) ---------- */
.st-hero{position:relative;overflow:hidden;background:var(--night);color:var(--ivory);padding:9rem 0 5rem}
.st-hero-inner{position:relative;z-index:1;max-width:88rem;margin:0 auto;padding:0 var(--edge)}
.st-eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.st-hero h1{margin-top:1.5rem;font-weight:900;font-size:clamp(2.3rem,6.2vw,5.6rem);letter-spacing:-.032em;line-height:.98;max-width:15ch}
.st-hero h1 em{font-size:1.04em;letter-spacing:-.01em}
.st-hero-lead{margin-top:2rem;max-width:44ch;font-size:var(--fs-lead);color:rgba(242,239,230,.78)}
.st-hero .st-link:hover{color:var(--smoke)}
.st-hero-mark{display:block;width:9rem;height:auto;margin:3rem var(--edge) 0 auto;position:relative;z-index:0}
@media (min-width:64rem){
  .st-hero{min-height:min(92vh,56rem);display:flex;align-items:center;padding:9.5rem 0 6rem}
  .st-hero-inner{width:100%}
  .st-hero-inner>*{max-width:min(50%,44rem)}
  .st-hero-inner h1{max-width:13ch;font-size:clamp(2.4rem,5vw,4.9rem)}
  .st-hero-mark{position:absolute;right:-9vw;top:50%;width:auto;height:104%;margin:0;transform:translateY(-50%)}
}
.st-form-a,.st-form-b{transform-box:fill-box}
.st-form-a{fill:var(--ivory)}
.st-form-b{fill:var(--crimson)}
@media (prefers-reduced-motion:no-preference){
  .st-form-a{animation:st-form-a .48s var(--ease) both}
  .st-form-b{animation:st-form-b .48s var(--ease) both}
}
@keyframes st-form-a{from{transform:translate(12%,-12%)}to{transform:none}}
@keyframes st-form-b{from{transform:translate(-12%,12%)}to{transform:none}}

/* ---------- 2. point of view (ivory) ---------- */
.st-pov{background:var(--ivory);color:var(--night)}
.st-pov-grid{display:grid;gap:2.5rem}
.st-pov h2{max-width:15ch}
.st-pov-list{display:grid;gap:0;border-top:1px solid rgba(13,13,12,.18)}
.st-pov-list li{padding:1.5rem 0;border-bottom:1px solid rgba(13,13,12,.18);color:var(--ash);font-size:1.05rem;line-height:1.55;max-width:56ch}
.st-pov-list strong{display:block;color:var(--night);font-weight:700;font-size:1.2rem;letter-spacing:-.01em;margin-bottom:.35rem}
@media (min-width:64rem){
  .st-pov-grid{grid-template-columns:5fr 6fr;column-gap:6rem;align-items:start}
  .st-pov h2{position:sticky;top:7rem}
}

/* ---------- 3. three areas (coal) ----------
   Desktop: ONE grid with six shared row tracks; every pillar is a subgrid that spans all six, so the
   heading, people, description, label, explanation and link of the three pillars start at the same
   height whatever the text length (the tallest cell sets the track). No per-column margins.
   Mobile: a plain vertical stack, each pillar internally complete. */
.st-areas{background:var(--coal);color:var(--ivory)}
.st-areas-head{display:grid;gap:1.25rem;margin-bottom:3.5rem}
.st-areas-head p{max-width:46ch;color:rgba(242,239,230,.74);font-size:var(--fs-lead)}
.st-areas-grid{display:grid;border-top:1px solid rgba(242,239,230,.22)}
.st-area{padding:2rem 0;border-bottom:1px solid rgba(242,239,230,.22);display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.st-area h3{font-weight:800;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.02em;line-height:1.1;display:flex;align-items:flex-start;gap:.7rem}
.st-area-mark{flex:none;width:.85rem;height:.85rem;margin-top:.42em}
.st-area-mark--night{background:var(--night);box-shadow:inset 0 0 0 1px rgba(242,239,230,.6)}
.st-area-mark--crimson{background:var(--crimson)}
.st-area-mark--ivory{background:var(--ivory)}
.st-area-who{font-size:.9rem;color:var(--smoke)}
.st-area-line{font-size:1.05rem}
.st-area-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--smoke);margin-top:.6rem}
.st-area-link{font-size:.95rem;color:rgba(242,239,230,.74);max-width:38ch}
.st-area .st-link:hover{color:var(--smoke)}
@media (min-width:64rem){
  .st-areas-head{grid-template-columns:7fr 5fr;column-gap:6rem;align-items:end}
  .st-areas-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(6,auto);column-gap:0;row-gap:.9rem}
  .st-area{padding:2.25rem 2rem 2.5rem;border-bottom:0;border-left:1px solid rgba(242,239,230,.22);
    grid-row:span 6;display:grid;grid-template-rows:subgrid;row-gap:inherit;align-items:start;justify-items:start}
  .st-area:first-child{border-left:0;padding-left:0}
  .st-area-go{align-self:end}
}
@supports not (grid-template-rows:subgrid){
  @media (min-width:64rem){
    .st-area{display:flex;grid-row:auto}
    .st-area-go{margin-top:auto}
  }
}

/* ---------- 4. people: three full-width colour bands ---------- */
.st-band{padding:6rem 0}
.st-band--first{padding-top:7rem}
.st-band--night{background:var(--night);color:var(--ivory);--b-fg2:rgba(242,239,230,.76);--b-line:rgba(242,239,230,.28);--b-accent:var(--smoke)}
.st-band--ivory{background:var(--ivory);color:var(--night);--b-fg2:var(--ash);--b-line:rgba(13,13,12,.3);--b-accent:var(--ash)}
.st-band--crimson{background:var(--crimson);color:var(--ivory);--b-fg2:rgba(242,239,230,.9);--b-line:rgba(242,239,230,.5);--b-accent:rgba(242,239,230,.88)}
.st-band-title{margin-bottom:3.5rem}
.st-person{display:grid;gap:1.75rem}
.st-person-sign{color:currentColor;max-width:30rem}
.st-signature{width:100%;height:auto}
.st-person-area{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--b-accent)}
.st-person h3{margin-top:.7rem;font-weight:900;font-size:clamp(1.9rem,3.4vw,3rem);letter-spacing:-.025em;line-height:1.02}
.st-person-role{margin-top:.5rem;font-family:var(--font-human);font-style:italic;font-size:1.2rem;color:var(--b-fg2)}
.st-person-text{margin-top:1.1rem;max-width:50ch;color:var(--b-fg2)}
.st-person-services{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.45rem 1.5rem}
.st-person-services a{font-size:.95rem;font-weight:500;border-bottom:1px solid var(--b-line);padding-bottom:.1rem;transition:opacity .18s ease,border-color .18s ease}
.st-person-services a:hover{opacity:.72;border-color:currentColor}
@media (min-width:64rem){
  .st-person{grid-template-columns:5fr 7fr;column-gap:6rem;align-items:center}
  .st-band--ivory .st-person{grid-template-columns:7fr 5fr}
  .st-band--ivory .st-person-sign{order:2}
  .st-band--ivory .st-person-body{order:1}
}
@media (max-width:63.99rem){
  .st-band{padding:4rem 0}
  .st-band--first{padding-top:4.5rem}
  .st-band-title{margin-bottom:2.5rem}
}

/* ---------- 5. how we work (night) ---------- */
.st-way{background:var(--night);color:var(--ivory)}
.st-way-grid{display:grid;gap:3rem}
.st-way-head p{margin-top:1.2rem;max-width:34ch;color:rgba(242,239,230,.74);font-size:var(--fs-lead)}
.st-way-head .st-link{margin-top:1.6rem}
.st-way-head .st-link:hover{color:var(--smoke)}
.st-principles{border-top:1px solid rgba(242,239,230,.22)}
.st-principles li{padding:1.6rem 0;border-bottom:1px solid rgba(242,239,230,.22);display:grid;gap:.5rem}
.st-principles h3{font-weight:800;font-size:clamp(1.5rem,2.8vw,2.3rem);letter-spacing:-.02em;line-height:1.08}
.st-principles p{max-width:52ch;color:rgba(242,239,230,.72)}
@media (min-width:64rem){
  .st-way-grid{grid-template-columns:4fr 8fr;column-gap:6rem;align-items:start}
  .st-way-head{position:sticky;top:7rem}
  .st-principles li{grid-template-columns:1fr 1fr;column-gap:3rem;align-items:baseline}
}

/* ---------- 6. work as evidence (ivory) ---------- */
.st-work{background:var(--ivory);color:var(--night)}
.st-work-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem 2rem;margin-bottom:3rem}
.st-work-head .st-link:hover{color:var(--crimson)}
.st-work-grid{display:grid;gap:3rem 1.5rem}
.st-work-item a{display:grid;gap:.4rem;align-content:start}
.st-work-media{display:block;position:relative;overflow:hidden;background:var(--coal);aspect-ratio:4/3;margin-bottom:.7rem}
.st-work-media .media-pic{display:contents}
.st-work-media .media-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-lock)}
.st-work-item a:hover .media-img{transform:scale(1.025)}
.st-work-brand{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ash)}
.st-work-title{font-weight:700;font-size:1.3rem;letter-spacing:-.012em;line-height:1.2}
.st-work-note{color:var(--ash);max-width:42ch;font-size:.95rem}
.st-work-item a:hover .st-work-title{color:var(--crimson)}
@media (min-width:64rem){
  .st-work-grid{grid-template-columns:repeat(12,1fr);align-items:start}
  .st-work-item--1{grid-column:1 / 8}
  .st-work-item--2{grid-column:9 / 13;margin-top:5rem}
  .st-work-item--3{grid-column:2 / 7}
  .st-work-item--4{grid-column:8 / 13;margin-top:3rem}
}

/* ---------- 7. closing (night) ---------- */
.st-close{background:var(--night);color:var(--ivory);padding:8rem 0 7rem;border-top:1px solid rgba(242,239,230,.12)}
.st-close h2{font-size:clamp(2.2rem,6vw,5rem);font-weight:900;letter-spacing:-.03em;line-height:.98;max-width:12ch}
.st-close-inner>p{margin-top:1.5rem;max-width:42ch;color:rgba(242,239,230,.78);font-size:var(--fs-lead)}
.st-close .st-link:hover{color:var(--smoke)}
.st-close-alt{margin-top:2rem;font-size:.9rem;color:var(--smoke)}
.st-close-alt a{color:var(--ivory);border-bottom:1px solid currentColor}

/* ---------- reveal (class added by studio.js only) ---------- */
.st-js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s var(--ease-lock)}
.st-js [data-reveal].is-in{opacity:1;transform:none}

@media (max-width:63.99rem){
  .st-section{padding:4.5rem 0}
  .st-hero{padding:7rem 0 3rem}
  .st-close{padding:5rem 0 4.5rem}
  .st-work-item:nth-child(n+2){margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .st *{transition-duration:.001ms !important}
  .st-js [data-reveal]{opacity:1;transform:none}
}
}