/* Page-specific rules for about / services / contact. Everything goes through the token + font variables. */

/* shared: statement hero, forms, CTA band */
.page-hero{padding-block:calc(var(--section) - 24px) 0}
.page-hero h1{max-width:12em;margin-bottom:32px}
.page-hero p{font-size:18px;max-width:36em}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 40px}
.f-grid .wide{grid-column:1/-1}
.f-row{display:block;margin-bottom:20px}
.f-row .mono{display:block;color:var(--ink-2)}
.f-row input,.f-row select,.f-row textarea{width:100%;border:0;border-bottom:1px solid var(--ink-2);border-radius:0;background:transparent;padding:10px 0;outline-offset:2px}
.f-row textarea{resize:vertical;min-height:96px}
.f-row input:focus,.f-row select:focus,.f-row textarea:focus{border-bottom-color:var(--ink);outline:0}
.f-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:16px}
.cta-band{background:var(--footer);color:var(--paper);text-align:left}
.cta-band .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.cta-band h2{max-width:12em}
.cta-band .btn-primary{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.cta-band .btn-primary:hover{background:var(--accent);border-color:var(--accent)}

/* about: timeline */
.timeline{border-top:1px solid var(--hairline)}
.tl-row{display:grid;grid-template-columns:200px 1fr;gap:40px;padding:36px 0;border-bottom:1px solid var(--hairline)}
.tl-row .mono{color:var(--ink-2);padding-top:6px}
.tl-row h3{margin-bottom:8px}
.tl-row p{max-width:38em;color:var(--ink-2)}

/* about: pull quote */
.pull{font-family:var(--font-display);font-weight:var(--display-weight);font-style:var(--display-style);letter-spacing:var(--display-tracking);line-height:1.15;font-size:calc(40px*var(--display-scale));max-width:24em;margin:0}

/* about: swarovski 50/50 */
.split{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center}
.split .lamp{aspect-ratio:4/5;background:var(--paper-2)}
.split p{max-width:34em;margin-bottom:20px}
.split .badge{width:200px;height:auto;margin-top:12px}

/* about: projects strip */
.cap{display:block;margin-top:12px;color:var(--ink-2)}
.proj .ph-img{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.proj img{width:100%;height:100%;object-fit:cover}
.proj-note{margin-top:40px;max-width:40em;color:var(--ink-2)}

/* services: one row per service, image sticky inside its row */
.sv-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px;align-items:start;min-height:110vh}
.sv-img{position:sticky;top:110px;height:min(70vh,640px);background:var(--paper-2);overflow:hidden}
.sv-img img{width:100%;height:100%;object-fit:cover}
.sv-text{align-self:center;padding-block:48px}
.sv-text .num{color:var(--ink-2);margin-bottom:20px}
.sv-text h2{margin-bottom:20px}
.sv-text p{max-width:30em}
.after{max-width:44em}
.after p{font-size:18px}
@media (max-width:899px){
  .sv-row{grid-template-columns:1fr;gap:28px;min-height:0;padding-block:40px;border-top:1px solid var(--hairline)}
  .sv-img{position:static;height:auto;aspect-ratio:4/3}
  .sv-text{padding-block:0}
}

/* contact */
.visit-split{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - var(--header-h))}
.visit-panel{background:var(--ink);color:var(--paper);padding:96px var(--gutter);display:flex;flex-direction:column;justify-content:center}
.visit-panel .eyebrow{color:rgba(248,246,241,.7)}
.visit-panel h1{margin-bottom:40px}
.visit-panel address{font-style:normal;font-size:18px;margin-bottom:24px}
.visit-panel ul{display:grid;gap:10px}
.visit-panel a{border-bottom:1px solid rgba(248,246,241,.4)}
.visit-panel a:hover{border-bottom-color:var(--paper)}
.visit-photo{position:relative;min-height:320px}
.visit-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.map{position:relative;background:var(--paper-2);aspect-ratio:16/7;margin-top:12px}
.map iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(.3)}
.map-bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:20px}
.form-wrap{max-width:760px}
@media (max-width:899px){
  .tl-row{grid-template-columns:1fr;gap:8px;padding:28px 0}
  .pull{font-size:calc(32px*var(--display-scale))}
  .split{grid-template-columns:1fr;gap:40px}
  .f-grid{grid-template-columns:1fr}
  .visit-split{grid-template-columns:1fr;min-height:0}
  .visit-panel{padding:64px var(--gutter)}
  .visit-photo{min-height:0;aspect-ratio:4/3}
  .map{aspect-ratio:4/3}
}
.split h2{margin-bottom:24px}