/* BENEFSAN — about.css (Company page only). Loaded after main.css; unlayered, so it wins over the layered globals.
   Tokens only — no raw hex. Sections keep the global anatomy (.section > .container > .sec-head + body). */

/* ============ 1 · Photo band (test centre) + key facts datasheet overlapping its bottom edge ============ */
.facts{padding-bottom:var(--section)}
/* caption: plain figure caption on the band's right, in the bottom padding above the overlapping card (≥720) */
@media (min-width:720px){
  .facts .photo-band__caption{inset-inline:auto max(var(--page-pad),calc((100% - var(--container)) / 2 + var(--page-pad)));bottom:calc(var(--sp-8) + var(--sp-5));padding:6px 12px 6px 10px;border-inline-start:2px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;background:var(--caption-bg);opacity:1;color:var(--on-navy);line-height:1.4}
}
/* phones: the navy caption tab sits just above the overlapping card (which covers the band's bottom 32px) */
@media (max-width:719.98px){.facts .photo-band__caption{bottom:calc(var(--sp-6) + var(--sp-2))}}
.facts-card{display:grid;gap:var(--sp-6) var(--gutter);padding:var(--sp-5)}
@media (min-width:720px){.facts-card{padding:var(--sp-6)}}
@media (min-width:1024px){.facts-card{grid-template-columns:5fr 7fr;gap:var(--sp-7) var(--sp-8);padding:var(--sp-7)}}
.facts-card__intro{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4);min-width:0}
.facts-card__intro .eyebrow{margin-bottom:0}
.facts-card__title{font-size:var(--fs-h3);max-width:14ch}
@media (min-width:1200px){.facts-card__title{font-size:var(--fs-h2);max-width:12ch}}
.facts-card__lead{color:var(--ink-2);max-width:40ch;font-size:var(--fs-body);line-height:1.55}
.facts-card__intro .btn--link{margin-top:var(--sp-2)}
.facts-card__sheet{align-self:start;border-top-color:var(--line-strong)}
.facts-card__sheet>div{padding:12px 0}
@media (min-width:1024px){.facts-card__sheet>div{grid-template-columns:200px 1fr;padding:14px 0}}
@media (min-width:1200px){.facts-card__sheet dd{font-size:var(--fs-small)}}
@media (max-width:479.98px){.facts-card__sheet>div{grid-template-columns:1fr;gap:4px}}

/* ============ 2 · Principles — four numbered rows with outlined numerals that fill gold on reveal ============ */
.principles-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.principle{display:grid;gap:var(--sp-2) var(--gutter);padding-block:var(--sp-6);border-bottom:1px solid var(--line);align-items:start}
@media (min-width:720px){.principle{grid-template-columns:minmax(88px,1.4fr) 10.6fr;grid-template-areas:"no title" "no body"}}
@media (min-width:1024px){.principle{grid-template-columns:minmax(96px,1.5fr) 3.5fr 7fr;grid-template-areas:"no title body";padding-block:var(--sp-7)}}
.principle__no{font-size:var(--fs-figure);line-height:.9;-webkit-text-stroke:1.25px var(--muted);transition:-webkit-text-stroke-color var(--t-fast)}
@supports not (-webkit-text-stroke:1px currentColor){.principle__no{color:var(--line)}}
@media (min-width:720px){.principle__no{grid-area:no;margin-top:-4px}}
.principle__title{margin:0;max-width:14ch}
@media (min-width:720px){.principle__title{grid-area:title}}
.principle__body{display:flex;flex-direction:column;gap:var(--sp-3);max-width:var(--reading);min-width:0}
@media (min-width:720px){.principle__body{grid-area:body}}
.principle__line{font-weight:500;color:var(--ink);font-size:var(--fs-body);line-height:1.55}
.principle__more{color:var(--ink-2);font-size:var(--fs-small);line-height:1.55}
/* without JS the numerals are already filled; with JS about.js adds .is-active on reveal (global rule paints the gold gradient) */
html:not(.js) .principle__no{color:transparent;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0}
@supports not (background-clip:text){html:not(.js) .principle__no{color:var(--gold-deep);background:none}}

/* ============ 3 · Reference work — three project datasheets ============ */
.refs{display:grid;gap:var(--gutter)}
@media (min-width:1200px){.refs{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 720–1199: each card runs horizontally — photo left, datasheet right — so three cards do not stack into one long column
   (three narrow columns only fit from 1200, where the dt/dd grid has room) */
@media (min-width:720px) and (max-width:1199.98px){
  .refs .card--project{display:grid;grid-template-columns:2fr 3fr;align-items:stretch}
  .refs .card--project .fig{display:flex;flex-direction:column;border-inline-end:1px solid var(--line)}
  .refs .card--project .fig img{height:100%;aspect-ratio:auto;min-height:260px;border-radius:var(--radius) 0 0 var(--radius)}
  .refs .card--project .fig figcaption{margin:var(--sp-3) var(--sp-5) var(--sp-4)}
}
.refs .card--project .h3{font-size:var(--fs-h3)}
/* datasheets sit at the card bottom so their hairline rows align across the row whatever the title length */
.refs .card--project .datasheet{margin-top:auto;padding-top:var(--sp-3)}
.refs .card--project .datasheet>div{grid-template-columns:104px 1fr;padding:8px 0}
.refs .card--project .card__inner{height:100%}
.refs__caption{margin-top:var(--sp-5);max-width:var(--reading);font-family:var(--font-body);font-size:var(--fs-small);line-height:1.5;color:var(--muted);padding-inline-start:12px;border-inline-start:2px solid var(--gold)}
.refs__caption .text-link{color:var(--navy-600)}

/* ============ 4 · Places — Bursa / Dubai rows, then the team ============ */
.places__row{display:grid;gap:var(--sp-5) var(--gutter);align-items:center}
.places__row+.places__row{margin-top:var(--sp-7)}
@media (min-width:900px){
  .places__row{grid-template-columns:7fr 5fr;gap:var(--sp-7)}
  .places__row--flip{grid-template-columns:5fr 7fr}
  .places__row+.places__row{margin-top:var(--sp-8)}
}
/* mobile: the photo always leads its text */
@media (max-width:899.98px){.places__row--flip .places__fig{order:-1}}
.places__fig img{aspect-ratio:3/2}
.place{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);min-width:0}
.place .eyebrow{margin-bottom:0}
.place .h3{max-width:16ch}
.place p{color:var(--ink-2);max-width:48ch}
.place .datasheet{width:100%;margin-top:var(--sp-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:0 var(--sp-4)}
.place .datasheet>div{grid-template-columns:96px 1fr;padding:9px 0}
.place .datasheet>div:last-child{border-bottom:0}
.places__now{color:var(--muted)}
.places__team{display:grid;gap:var(--sp-4) var(--gutter);margin-top:var(--sp-8);padding-top:var(--sp-7);border-top:1px solid var(--line);align-items:start}
@media (min-width:900px){.places__team{grid-template-columns:5fr 7fr;gap:var(--sp-7)}}
.places__team-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);min-width:0}
.places__team-head .eyebrow{margin-bottom:0}
.places__team-head .h3{max-width:16ch}
.place--team p{max-width:var(--reading)}
.place--team .btn--link{margin-top:var(--sp-2)}

/* ============ 5 · Milestones — hairline grid, mono tags ============ */
.milestones{list-style:none;margin:0;padding:0}
.milestone{display:flex;flex-direction:column;gap:var(--sp-3);min-height:100%}
@media (min-width:1200px){.milestone{padding:var(--sp-6)}}
.milestone__icon{color:var(--navy);margin-bottom:var(--sp-2)}
.milestone__meta{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.milestone__idx{color:var(--gold-deep)}
.milestone__idx::after{content:"";display:inline-block;width:12px;height:1px;background:var(--line-strong);margin-inline-start:var(--sp-3);vertical-align:middle;opacity:.4}
.milestone__title{font-size:var(--fs-h4);max-width:20ch;text-wrap:balance}

/* ============ 6 · Careers — navy statement line ============ */
.careers__inner{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-5) var(--sp-7)}
.careers .eyebrow{margin-bottom:var(--sp-3)}
.careers__line{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.02em;max-width:22ch;margin:0}
.careers__cta{font-size:var(--fs-lead);color:var(--on-navy-muted);margin:0;padding-bottom:4px}
.careers__cta .text-link{color:var(--on-navy);text-decoration-color:var(--gold);text-underline-offset:4px}
.careers__cta .text-link:hover{color:var(--gold)}

/* ============ 7 · Privacy / legal — prose left, datasheet right ============ */
.legal .sec-head{margin-bottom:var(--sp-6)}
.legal__grid{display:grid;gap:var(--sp-6) var(--gutter)}
@media (min-width:1024px){.legal__grid{grid-template-columns:7fr 5fr;gap:var(--sp-7) var(--sp-8);align-items:start}}
.legal__prose{max-width:var(--reading)}
.legal__prose p{color:var(--ink-2);font-size:var(--fs-body)}
.legal__sheet{border-top-color:var(--line-strong)}
.legal__sheet>div{padding:11px 0}
@media (min-width:1024px){.legal__sheet>div{grid-template-columns:160px 1fr}}
@media (max-width:479.98px){.legal__sheet>div{grid-template-columns:1fr;gap:4px}}
.band--grey .legal__sheet,.band--grey .place .datasheet{background:transparent}

/* ============ 8 · Reduced motion / kill switch ============ */
@media (prefers-reduced-motion:reduce){.principle__no{transition:none}}

/* ============ 9 · Print ============ */
@media print{
  .facts .photo-band__caption{position:static}
  .overlap{margin-top:16px}
  .principle__no{color:var(--ink);-webkit-text-stroke:0;background:none}
  .refs,.places__team,.milestones{break-inside:avoid}
  .refs .card--project .datasheet{margin-top:var(--sp-3)}
  .careers{background:none !important;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
}

/* page head: the H1 measure is widened (global .page-head h1 is 16ch) so "The umbrella company for gravity plants." breaks as two balanced lines, not three */
.page-head .h1--inner{max-width:20ch}
/* page-head eyebrow can wrap to two lines on phones: keep the gold bar on the first line */
.page-head .eyebrow{align-items:flex-start}
.page-head .eyebrow::before{margin-top:6px}


/* R02.2 — Places without the Dubai office: a single contact row, text left and datasheet right */
.places__row--single{grid-template-columns:1fr}
@media (min-width:900px){
  .places__row--single{grid-template-columns:1fr}
  .place--contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--sp-8);row-gap:var(--sp-3);align-items:start}
  .place--contact>*{grid-column:1}
  .place--contact .datasheet{grid-column:2;grid-row:1/span 4;margin-top:0;align-self:start}
}