/* ==========================================================================
   Skanli / pages.css
   Products, Clients and the three enquiry forms (Start a project, Book a
   demo, Contact). Owner: pages builder. Builds on the tokens and components
   in site.css (never edited here); every class below is page-prefixed.

    1  Products: the product index (ruled rows, plates, drawn icons)
    2  Clients: entries with a labelled fact list
    3  Enquiry forms: layout, numbered parts, side panel, states
    4  Legal pages (privacy/, terms/) and the not-found page (404.html)
   ========================================================================== */

/* 1 ─ Products ─────────────────────────────────────────────────────────── */
/* One ruled row per product. The Visit link stretches over the whole row. */
.products-list,.clients-list{padding-top:clamp(48px,5vw,72px)}
.product-index{border-top:1px solid var(--line-strong)}
.pi{
  position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:16px;
  align-items:start;padding:32px 0;border-bottom:1px solid var(--line);
}
.pi__num{grid-column:1;padding-top:3px;font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;color:var(--text)}

/* The plate: a Canvas figure with the build-canvas crosses (whole crosses only,
   thanks to round), and the icon drawn as a Paper object in the centre */
.pi__plate{
  grid-column:2 / span 2;display:grid;place-items:center;aspect-ratio:4 / 3;min-width:0;
  background:var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M9.5 12.5h6M12.5 9.5v6' stroke='%23D2CCBF' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 24px 24px round;
  color:var(--ink);
}
/* Icons are drawn on a 48-unit grid. The stroke stays 1.5 px at every size. */
.pi__icon{width:80px;height:80px;overflow:visible}
.pi__icon *{vector-effect:non-scaling-stroke}
.pi-p{fill:var(--paper)}                     /* the object's Paper body */
.pi-l{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.pi-l .pi-m{fill:var(--paper)}               /* wheels and the pin's eye */
.pi-f{fill:transparent;transition:fill var(--dur-2) linear}
.pi:hover .pi-f,.pi:focus-within .pi-f{fill:var(--lime)}

.pi__body{grid-column:5 / span 5;display:grid;gap:12px;min-width:0}
.pi__title{font:400 clamp(1.75rem,1.4rem + 1.2vw,2.5rem)/1.08 var(--font-serif);letter-spacing:-.02em;color:var(--text)}
.pi__text{max-width:52ch;font-size:var(--fs-body);line-height:1.55;color:var(--text-2)}
.pi__meta{grid-column:10 / span 3;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:0;text-align:right}
.pi__url{font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.04em;color:var(--text-3);overflow-wrap:anywhere}
.pi__visit::after{content:"";position:absolute;inset:0;z-index:var(--z-raised)}
.pi:hover .pi__visit > span{background-size:100% 100%;text-decoration-color:transparent;color:var(--ink)}
.pi:hover .pi__visit svg{transform:translate(2px,-2px)}

@media (max-width:1099px){
  .pi__body{grid-column:4 / span 6}
  .pi__icon{width:64px;height:64px}
}
@media (max-width:899px){
  .pi__plate{grid-column:2 / span 3;grid-row:1 / span 2}
  .pi__body{grid-column:5 / -1}
  .pi__meta{grid-column:5 / -1;grid-row:2;justify-self:start;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 20px;text-align:left}
}
@media (max-width:699px){
  .pi{grid-template-columns:72px minmax(0,1fr);column-gap:16px;row-gap:10px;padding:24px 0 22px}
  .pi__num{grid-column:2;grid-row:1;padding-top:0}
  .pi__plate{grid-column:1;grid-row:1 / span 3;aspect-ratio:1;background-image:none}
  .pi__icon{width:44px;height:44px}
  .pi__body{grid-column:2;grid-row:2;gap:8px}
  .pi__title{font-size:1.75rem}
  .pi__meta{grid-column:2;grid-row:3}
}

/* 2 ─ Clients ──────────────────────────────────────────────────────────── */
/* The shared .client row, with the name and site on the left and the facts
   (Sector, Region, About) as a labelled list on the right. */
.client-list--detail .client{row-gap:24px;padding:36px 0 40px}
.client__head{grid-column:1 / span 5;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.client__num{font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;color:var(--text)}
.client__head .client__name{font-size:clamp(2rem,1.5rem + 1.6vw,3rem)}
.client__site{margin-top:auto;padding-top:12px;max-width:100%}
.client__site > span:first-child{overflow-wrap:anywhere}
.client-facts{grid-column:7 / span 6;min-width:0}
.client-facts__row{display:grid;grid-template-columns:7rem minmax(0,1fr);column-gap:var(--gutter);padding:13px 0 14px;border-top:1px solid var(--line)}
.client-facts__row:first-child{padding-top:0;border-top:0}
.client-facts dt{font:500 var(--fs-label)/24px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
/* Each value sits in the second column of its fact row. (site.css now places .client__*
   only as direct children of .client, so this is a plain layout rule, kept as a guard.) */
.client-facts dd{grid-column:2;align-self:start;font-size:16px;line-height:1.5}
.client-facts .client__sector,.client-facts .client__region{font:400 16px/1.5 var(--font-sans);letter-spacing:-.005em;color:var(--text)}
.client-facts .client__about{max-width:58ch;color:var(--text-2)}
.clients-note{margin-top:28px;max-width:62ch;font-size:var(--fs-small);line-height:1.5;color:var(--text-3)}

@media (max-width:1099px){
  .client__head{grid-column:1 / span 5}
  .client-facts{grid-column:6 / -1}
}
@media (max-width:899px){
  .client__head,.client-facts{grid-column:1 / -1}
  .client__site{margin-top:0;padding-top:0}
}
@media (max-width:699px){
  .client-list--detail .client{row-gap:18px;padding:26px 0 28px}
  .client-facts__row{grid-template-columns:5.25rem minmax(0,1fr);column-gap:12px}
  .client-facts dd,.client-facts .client__sector,.client-facts .client__region{font-size:15px}
}

/* 3 ─ Enquiry forms ────────────────────────────────────────────────────── */
/* The form on the left (7 columns), the side panel on the right (4 columns). */
.enquiry{padding:clamp(48px,5vw,72px) 0 var(--section-pad)}
.enquiry__main{grid-column:1 / span 7;min-width:0}
.enquiry__aside{grid-column:9 / span 4;align-self:start;position:sticky;top:32px;min-width:0}
@media (max-width:899px){
  .enquiry__main{grid-column:1 / -1}
  .enquiry__aside{grid-column:1 / -1;position:static;margin-top:72px}
}
@media (max-width:699px){ .enquiry__aside{margin-top:56px} }

/* Numbered parts: a numeral and a serif title on an Ink rule */
.form-part{display:grid;gap:28px;min-width:0}
.form > .form-part + .form-part{margin-top:28px}
.form-part__head,.form-aside__head{display:flex;align-items:baseline;gap:16px;padding-top:16px;border-top:1px solid var(--line-strong)}
.form-part__num{font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;color:var(--text)}
.form-part__title,.form-aside__title{font:400 clamp(1.5rem,1.3rem + .6vw,1.875rem)/1.15 var(--font-serif);letter-spacing:-.015em;color:var(--text)}
.field--half{width:calc(50% - var(--gutter) / 2)}
.fieldset .field__help{margin:-4px 0 4px}
.form .form-note{margin-top:8px}
@media (max-width:699px){
  .field--half{width:auto}
  .form-actions .btn{flex:1 1 100%}
}

/* Side panel */
.form-aside{display:grid;gap:28px}
/* What happens next: the compact steps as numbered rows on hairlines */
.form-aside .steps{grid-template-columns:minmax(0,1fr);gap:0}
.next-steps .step{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px;padding:15px 0 16px;border-top:1px solid var(--line)}
.next-steps .step:first-child{border-top:0;padding-top:0}
.next-steps .step::before{display:none}
.next-steps .step__num{grid-row:auto;padding-top:4px}
.next-steps .step__title{margin-top:0;font:500 17px/1.45 var(--font-sans);letter-spacing:-.01em;color:var(--text)}
/* Book a demo: the product index */
.aside-list li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.4;color:var(--text)}
.aside-list li:last-child{border-bottom:1px solid var(--line)}
.aside-list li > span:last-child{flex:none;font:500 var(--fs-micro)/20px var(--font-mono);letter-spacing:.06em;color:var(--text-3)}
.form-aside .link-arrow{justify-self:start}
/* Contact: the other two forms */
.routes li{display:grid;gap:6px;padding:18px 0 20px;border-top:1px solid var(--line)}
.routes li:first-child{padding-top:0;border-top:0}
.routes li:last-child{padding-bottom:0}
.route__num{font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;color:var(--text-3)}
.route__title .link-arrow{font:600 var(--fs-h4)/1.3 var(--font-sans);letter-spacing:-.01em}
.route__text{max-width:40ch;font-size:15px;line-height:1.5;color:var(--text-2)}

/* 4 ─ Legal pages and the 404 page ─────────────────────────────────────── */
/* Privacy and Terms: the page's facts (status, date, scope) on the left, and the
   text on the right as a numbered list of short points */
.legal{padding-top:clamp(48px,5vw,72px)}
.legal__aside{grid-column:1 / span 3;align-self:start;min-width:0}
.legal__body{grid-column:5 / span 7;min-width:0}
.legal-meta{border-top:1px solid var(--line-strong)}
.legal-meta__row{display:grid;gap:4px;padding:12px 0 13px;border-bottom:1px solid var(--line)}
.legal-meta dt{font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.legal-meta dd{margin:0;font-size:16px;line-height:1.45;color:var(--text)}
.legal__title{padding-top:16px;border-top:1px solid var(--line-strong);font:400 var(--fs-h3)/1.15 var(--font-serif);letter-spacing:-.015em;color:var(--text)}
.legal-list{margin-top:28px;counter-reset:legal}
.legal-list > li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px;row-gap:6px;padding:20px 0 22px;border-top:1px solid var(--line)}
.legal-list > li::before{
  counter-increment:legal;content:counter(legal,decimal-leading-zero);grid-row:1 / span 2;padding-top:5px;
  font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;color:var(--text);
}
.legal-list h3{font:600 var(--fs-h4)/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--text)}
.legal-list p{max-width:60ch;color:var(--text-2)}
@media (max-width:1099px){
  .legal__aside{grid-column:1 / span 4}
  .legal__body{grid-column:6 / -1}
}
@media (max-width:899px){
  .legal__aside,.legal__body{grid-column:1 / -1}
  .legal__body{margin-top:48px}
}
@media (max-width:699px){ .legal-list > li{grid-template-columns:36px minmax(0,1fr)} }

/* Not found (404.html): the page head carries the way on */
.notfound{padding-bottom:var(--section-pad);border-bottom:0}
.notfound__actions{grid-column:1 / -1;margin-top:40px}
.notfound__home{grid-column:1 / -1;justify-self:start;margin-top:16px}