/* pages.css - components for the interior pages (Framework, Services, About,
   Contact). Builds on home-site.css: same bands, spine, type, motion. Adds the
   page header, meta lines, gated form, contact channels, fact panel, pull-quote
   and large statement bands - all in the watercolor-architecture language. */

/* ============================ page header ============================ */
.page-head{
  text-align:center; padding:clamp(40px,7vw,84px) var(--pad) clamp(32px,5vw,60px);
  max-width:1000px; margin:0 auto;
}
.page-head .eyebrow{ display:inline-block; margin-bottom:clamp(18px,2.4vw,26px); }
.page-head .ptitle{
  font-size:clamp(34px,6vw,66px);
}
.ptitle{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  line-height:1.06; letter-spacing:-.012em; margin:0;
}
.ptitle em{ font-style:italic; }
.ptitle .accent{ font-style:italic; color:var(--ink); }
/* display type breaks on balanced, sentence-aware lines (never a lone orphan) */
.ptitle,.tagline,.pintro,.block-head,.section-intro,.lead-bold,.section-title,
.statement-band .big,.pullquote,.ctitle,.card-foot,.produces .pdesc{ text-wrap:balance; }
.flow p,.cbody,.dl-sub,.contact-note{ text-wrap:pretty; }
.page-head .ptitle .stack{ display:block; }
.page-head .tagline{
  font-family:var(--serif); font-style:italic; color:var(--ink-2);
  font-size:clamp(19px,2.6vw,27px); line-height:1.4; margin:clamp(18px,2.4vw,26px) auto 0; max-width:24em;
}
.page-head .pintro{
  font-family:var(--sans); font-size:clamp(16px,1.5vw,19px); line-height:1.7; color:var(--ink-2);
  max-width:40em; margin:clamp(20px,2.6vw,30px) auto 0;
}
/* header that carries a portrait (About) */
.head-portrait{
  display:grid; grid-template-columns:1fr clamp(220px,26vw,320px); gap:clamp(28px,4vw,56px);
  align-items:center; max-width:var(--maxw); margin:0 auto; text-align:left;
  padding:clamp(36px,6vw,76px) var(--pad) clamp(28px,4vw,52px);
}
.head-portrait .eyebrow{ margin-bottom:20px; }
.head-portrait .ptitle{ font-size:clamp(32px,5vw,56px); }
.head-portrait .col-portrait img{ width:100%; height:auto; display:block; mix-blend-mode:multiply; }
.head-portrait .pintro{ margin-left:0; margin-right:0; max-width:38em; }

/* About header: image floats top-right; text flows beside it then full-width below (no gap) */
.about-head{
  display:block; max-width:var(--maxw);
}
.about-head .about-hero-img{
  float:right; width:clamp(340px,42%,520px); margin:6px 0 22px clamp(28px,4vw,56px);
}
.about-head .ptitle{ line-height:1.12; margin-bottom:clamp(20px,2.6vw,30px); }
.about-head .flow{ display:block; margin-top:0 !important; max-width:none; }
.about-head .flow p{ max-width:none; margin:0 0 22px; }
.about-head .flow p:last-child{ margin-bottom:0; }
.about-head::after{ content:''; display:block; clear:both; }
.about-head .about-hero-img img{
  width:100%; height:auto; display:block; mix-blend-mode:multiply;
}
@media (max-width:880px){
  .about-head .about-hero-img{ float:none; width:100%; margin:0 0 26px; }
}

/* ── Feathered image edges — watercolor scenes melt into the ground instead of
   showing a hard rectangular crop. Reusable site-wide aesthetic. ── */
.feather-edges, .feather-edges img{
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}

/* ============================ section intro under a spine title ============================ */
.section-intro{
  font-family:var(--serif); font-style:italic; color:var(--ink-2);
  font-size:clamp(20px,2.6vw,28px); line-height:1.34; margin:0 0 clamp(30px,4vw,46px); max-width:32em;
}
.band-deep .section-intro{ color:var(--ink-2); }

/* ============================ headline + body blocks ============================ */
.block-head{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(26px,3.8vw,40px); line-height:1.14; margin:0 0 clamp(22px,3vw,30px); max-width:24em;
}
.flow{ max-width:820px; display:flex; flex-direction:column; gap:22px; }
.flow p{ font-family:var(--sans); font-size:clamp(16px,1.5vw,19px); line-height:1.72; color:var(--ink-2); }
.flow p.muted{ color:var(--body); }
.lead-bold{
  font-family:var(--serif); font-weight:600; color:var(--ink);
  font-size:clamp(24px,3.4vw,34px); line-height:1.2; margin:0 0 24px;
}

/* ============================ card columns (reuses .cols system) ============================
   A "card" here is a column with: kicker (node-mark or numeral) · title · meta · body.
   Stays consistent with the home Lens/Practices columns. */
.card .meta{
  font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:0 0 16px; line-height:1.5;
}
.band-deep .card .meta{ color:#455349; }
.card .ctitle{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(21px,2.4vw,27px); line-height:1.14; margin:0 0 6px;
}
.card .cbody{ font-family:var(--sans); font-size:clamp(15px,1.35vw,16.5px); line-height:1.66; color:var(--ink-2); }
.card .knode{ display:block; margin-bottom:16px; }
.card-foot{
  font-family:var(--sans); font-size:14px; font-style:italic; color:var(--muted);
  text-align:center; margin-top:clamp(34px,4vw,48px); max-width:46em; margin-left:auto; margin-right:auto;
}

/* two-up and the 2×2 workshop grid */
.cols.two{ grid-template-columns:1fr 1fr; }
.grid2x2{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.grid2x2 > .card{ padding:clamp(24px,3vw,38px) clamp(20px,2.6vw,40px); }
.grid2x2 > .card:nth-child(odd){ border-right:1px solid var(--hair); }
.grid2x2 > .card:nth-child(n+3){ border-top:1px solid var(--hair); }

/* ============================ ordered "what it produces" list ============================ */
.produces{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,34px) clamp(34px,5vw,64px); max-width:980px; }
.produces li{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; }
.produces .pterm{ font-family:var(--serif); font-weight:600; color:var(--ink); font-size:clamp(19px,2vw,22px); line-height:1.2; }
.produces .pdesc{ font-family:var(--sans); font-size:clamp(15px,1.3vw,16.5px); line-height:1.62; color:var(--ink-2); }
.produces li .mk{ margin-top:3px; }

/* ============================ large statement band ============================ */
.statement-band{ text-align:center; }
.statement-band .inner{ max-width:980px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.statement-band .big{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(27px,4.2vw,46px); line-height:1.22; letter-spacing:-.004em; margin:26px 0 0; max-width:20em;
}
.statement-band .big em{ font-style:italic; }
.statement-band .below{ margin-top:clamp(30px,4vw,42px); }

/* ============================ gated download form ============================ */
.download{ }
.download .dl-inner{
  max-width:560px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center;
}
.download h2{ font-family:var(--serif); font-weight:500; color:var(--ink); font-size:clamp(28px,4vw,44px); line-height:1.12; margin:20px 0 16px; }
.download .dl-sub{ font-family:var(--sans); font-size:clamp(15px,1.4vw,18px); line-height:1.62; color:var(--ink-2); max-width:34em; margin:0 0 30px; }
.dl-form{ display:flex; flex-direction:column; gap:12px; width:100%; max-width:420px; }
.dl-form .field{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.dl-form label{ font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.dl-form input{
  font-family:var(--sans); font-size:16px; color:var(--ink); background:rgba(255,255,255,.55);
  border:1px solid var(--hair); border-radius:8px; padding:12px 14px; outline:none;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.dl-form input::placeholder{ color:var(--muted); opacity:.7; }
.dl-form input:focus{ border-color:var(--ink); background:#fff; box-shadow:0 0 0 3px rgba(35,54,74,.08); }
.dl-form .btn{ margin-top:6px; justify-content:center; }
.dl-micro{ font-family:var(--sans); font-size:13px; color:var(--muted); line-height:1.55; margin:16px 0 0; max-width:34em; }
.dl-success{
  display:none; align-items:center; gap:12px; font-family:var(--serif); font-style:italic;
  font-size:clamp(20px,2.4vw,26px); color:var(--ink); margin-top:8px;
}
.dl-success.on{ display:flex; }
.dl-success .ok{ width:34px; height:34px; flex:none; }

/* ============================ contact channels ============================ */
.channels{ display:flex; flex-direction:column; gap:0; max-width:680px; }
.channel{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:clamp(20px,2.6vw,28px) 0; border-top:1px solid var(--hair);
}
.channel:last-child{ border-bottom:1px solid var(--hair); }
.channel .ch-label{ font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.channel .ch-value{ font-family:var(--serif); font-size:clamp(20px,2.4vw,28px); color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ochre-line); padding-bottom:2px; transition:border-color .2s, color .2s; }
.channel .ch-value:hover{ border-color:var(--ink); }
.contact-note{ font-family:var(--sans); font-style:italic; color:var(--ink-2); font-size:clamp(15px,1.5vw,18px); line-height:1.6; margin:clamp(24px,3vw,34px) 0 0; max-width:34em; }

/* "We should work together if…" reasons — three columns across the full width */
.reasons{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3.4vw,52px); max-width:none; }
.reasons li{
  position:relative; padding-top:30px;
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(19px,1.85vw,23px); line-height:1.34;
}
.band-deep .reasons li{ color:var(--ink); }
.reasons .rdot{
  position:absolute; left:0; top:0; width:13px; height:13px; border-radius:50%;
  border:1.5px solid var(--ochre); background:transparent;
}
@media (max-width:760px){
  .reasons{ grid-template-columns:1fr; gap:clamp(22px,4vw,30px); }
}

/* How to reach Michal — channels beside the watercolor motif */
.reach-grid{ display:grid; grid-template-columns:1fr clamp(200px,26%,300px); gap:clamp(30px,4.5vw,60px); align-items:center; }
.reach-art{ margin:0; }
.reach-art img{ width:100%; height:auto; display:block; }
@media (max-width:760px){
  .reach-grid{ grid-template-columns:1fr; gap:clamp(24px,4vw,36px); }
  .reach-art{ max-width:240px; justify-self:center; order:-1; }
}

/* ============================ pull-quote ============================ */
.pullquote{
  font-family:var(--serif); font-style:italic; font-weight:500; color:var(--ink);
  font-size:clamp(24px,3.6vw,38px); line-height:1.26; letter-spacing:-.004em;
  margin:clamp(30px,4vw,46px) 0; padding-left:clamp(20px,3vw,34px); border-left:2px solid var(--ochre-line); max-width:20em;
}
.band-deep .pullquote{ border-left-color:var(--band-light); }

/* ============================ fact panel (About sidebar) ============================ */
.factpanel{ }
.factpanel .facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(26px,4vw,46px); max-width:var(--maxw); margin:0 auto; }
.fact .flabel{ font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#455349; margin:0 0 10px; }
.fact .fval{ font-family:var(--serif); font-size:clamp(18px,1.9vw,22px); line-height:1.4; color:var(--ink); }
.fact .fval .he{ color:var(--ink-2); }

/* ============================ closing CTA reuse ============================ */
.page-closing{ text-align:center; }
.page-closing .inner{ max-width:880px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }

/* ============================ breakpoints ============================ */
@media (max-width:920px){
  .produces{ grid-template-columns:1fr; }
  .head-portrait{ grid-template-columns:1fr; text-align:center; }
  .head-portrait .col-portrait{ order:-1; max-width:300px; margin:0 auto; }
  .head-portrait .pintro{ margin-left:auto; margin-right:auto; }
  .factpanel .facts{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .cols.two,.grid2x2{ grid-template-columns:1fr; }
  .grid2x2 > .card{ border-right:0 !important; border-top:1px solid var(--hair); padding-left:0; padding-right:0; }
  .grid2x2 > .card:first-child{ border-top:0; }
  .channel{ flex-direction:column; align-items:flex-start; gap:8px; }
}