/* SERVICES v2 + CONTACT COMPONENT (HYO, 2026-11-11 "FINAL UI / UX & SERVICES CONTENT REFINEMENT"). Loaded last.
   Same tokens as Design System V1 (ink on white, Schibsted Grotesk, 4-column page grid, --m gutters); no new colours, icons
   or decoration. Hierarchy comes from type size, rules and the page grid. Rollback: backups/PRE-REFINE-2026-11-11/. */

/* shared small caps label (the site's .label voice, one size everywhere on these pages) */
.sv2-label,.sv2-caps-label,.cq-label,.cq-k,.sv2-work>span{font-size:10.5px;line-height:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:400}

/* ---------- SERVICES ---------- */
.sv.sv2{display:block;padding-top:clamp(96px,22vh,200px)}
.sv2-head,.sv2-item,.sv2-avail,.cq{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--m)}
.sv2-head{padding-bottom:clamp(56px,9vh,104px)}
.sv2-label{grid-column:1/2;padding-top:.7em}
.sv2-intro{grid-column:2/5}
.sv2-statement{margin:0;max-width:30ch;font:400 clamp(24px,2.35vw,36px)/1.16 var(--font);letter-spacing:-.016em;color:var(--ink);text-wrap:balance}
.sv2-support{margin:22px 0 0;max-width:56ch;font-size:14px;line-height:22px;color:var(--mute);text-wrap:pretty}
.sv2-review{grid-column:2/5;margin-top:24px}

.sv2-list{list-style:none;margin:0;padding:0}
.sv2-item{border-top:1px solid var(--ink);padding:18px 0 clamp(44px,7vh,72px)}
.sv2-name{grid-column:1/2;padding-right:var(--m)}
.sv2-n{display:block;margin-bottom:14px;font-size:12px;line-height:16px;color:var(--mute);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.sv2-name h2{margin:0;max-width:13ch;font:500 clamp(20px,1.75vw,26px)/1.12 var(--font);letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.sv2-item:first-child .sv2-name h2{font-size:clamp(22px,2.05vw,30px)}   /* the foundation discipline reads first and a step larger */
.sv2-body{grid-column:2/4;padding-right:clamp(12px,3vw,48px)}
.sv2-body>p:first-child{margin:0;max-width:52ch;font-size:15px;line-height:23px;color:var(--ink);text-wrap:pretty}
.sv2-work{margin:26px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.sv2-work>span{flex-basis:100%;margin-bottom:2px}
.sv2-work a,.sv2-caps a{color:var(--ink);text-decoration:none;font-size:13px;line-height:19px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:1px;transition:background-size .28s ease}
.sv2-work a:hover,.sv2-work a:focus-visible{background-size:0 1px;background-position:100% 100%}
.sv2-caps{grid-column:4/5}
.sv2-caps-label{display:block;padding-bottom:8px}
.sv2-caps ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sv2-caps li{font-size:13px;line-height:18px;padding:7px 0 8px;border-bottom:1px solid var(--line);color:var(--ink)}

.sv2-avail{border-top:1px solid var(--line);padding:18px 0 0}
.sv2-avail p{grid-column:2/5;margin:0;font-size:15px;line-height:23px;color:var(--mute);max-width:52ch}

/* ---------- CONTACT COMPONENT (Services: Project inquiries; Contact page) ---------- */
.cq{border-top:1px solid var(--ink);padding-top:18px;margin-top:clamp(72px,12vh,140px)}
.cq-intro{grid-column:1/3;padding-right:clamp(16px,4vw,72px)}
.cq-label{display:block;margin-bottom:26px}
.cq-title{margin:0;max-width:34ch;font:400 clamp(22px,2.05vw,30px)/1.18 var(--font);letter-spacing:-.013em;color:var(--ink);text-wrap:balance}
.cq-text{margin:16px 0 0;max-width:42ch;font-size:14px;line-height:22px;color:var(--mute)}
.cq-methods{grid-column:3/5;align-self:start}
.cq-list{list-style:none;margin:0;padding:0}
.cq-list li+li .cq-link{border-top:1px solid var(--line)}
.cq-link{display:grid;grid-template-columns:minmax(88px,30%) minmax(0,1fr) auto;align-items:baseline;column-gap:12px;padding:14px 0 16px;color:var(--ink);text-decoration:none}
.cq-list li:first-child .cq-link{padding-top:2px}
.cq-list li:last-child .cq-link{border-bottom:1px solid var(--line)}
.cq-v{justify-self:start;font-size:clamp(17px,1.45vw,21px);line-height:1.25;letter-spacing:-.006em;overflow-wrap:anywhere;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .32s ease}
.cq-arrow{font-size:14px;line-height:1;color:var(--mute);transition:transform .28s ease,color .28s ease}
.cq-link:hover .cq-v,.cq-link:focus-visible .cq-v{background-size:100% 1px}
.cq-link:hover .cq-arrow,.cq-link:focus-visible .cq-arrow{transform:translate(3px,-3px);color:var(--ink)}
.cq-link:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* About: the same rows inside the info panel, one size smaller */
.about .cq-list{margin-top:10px;padding:0}
.info .cq-link{text-decoration:none}
.about .info{container-type:inline-size}   /* the About contact rows size themselves to their panel */
.about .cq-link{grid-template-columns:minmax(0,1fr) auto;row-gap:2px;padding:9px 0 10px}
.about .cq-k{grid-column:1/-1}
.about .cq-arrow{grid-column:2;grid-row:2}
.about .cq-list li:first-child .cq-link{padding-top:2px}
.about .cq-v{font-size:clamp(11.5px,8.2cqi,14px);line-height:18px;overflow-wrap:normal;white-space:nowrap}
.about .cq-list li+li .cq-link,.about .cq-list li:last-child .cq-link{border-color:rgba(0,0,0,.09)}

/* Contact page: the component alone, at the page's usual top offset */
.cq-page{padding-top:clamp(96px,26vh,240px)}
.cq-page .cq{margin-top:0}

@media (prefers-reduced-motion:reduce){ .cq-v,.cq-arrow,.sv2-work a{transition:none} }

/* phones and narrow windows: one clean column, nothing clipped */
@media (max-width:760px){
  .sv.sv2{padding-top:clamp(64px,12vh,120px)}
  .sv2-label,.sv2-intro,.sv2-review,.sv2-name,.sv2-body,.sv2-caps,.sv2-avail p,.cq-intro,.cq-methods{grid-column:1/-1}
  .sv2-label{padding-top:0;margin-bottom:14px}
  .sv2-statement{font-size:24px;line-height:29px}
  .sv2-support{margin-top:16px}
  .sv2-head{padding-bottom:48px}
  .sv2-item{padding:16px 0 44px}
  .sv2-n{margin-bottom:10px}
  .sv2-name h2,.sv2-item:first-child .sv2-name h2{max-width:none;font-size:23px;line-height:27px}
  .sv2-body{padding-right:0;margin-top:14px}
  .sv2-work{margin-top:20px}
  .sv2-caps{margin-top:24px}
  .cq{margin-top:72px}
  .cq-intro{padding-right:0}
  .cq-label{margin-bottom:18px}
  .cq-title{font-size:23px;line-height:28px}
  .cq-methods{margin-top:28px}
  .cq-link,.about .cq-link{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .cq-k{grid-column:1/-1}
  .cq-arrow{grid-column:2;grid-row:2}
  .cq-page{padding-top:clamp(64px,14vh,150px)}
}
/* between phone and full desktop the body column needs the room of three columns */
@media (min-width:761px) and (max-width:1100px){
  .sv2-name{grid-column:1/-1;margin-bottom:16px}
  .sv2-name h2{max-width:none}
  .sv2-body{grid-column:1/4}
  .sv2-caps{grid-column:4/5}
  .cq-intro{grid-column:1/3}
}