/* Co-ownership Solutions site layer — light redesign, palette derived from the logo.
   White-dominant, type-led hierarchy; green reserved for action; DS tokens retained for ink/hairline/type.
   --color-primary is re-pointed to the action green so DS bundle components (contact form) follow. */
:root{--c-green:#2e7d59;--c-green-deep:#245f45;--c-teal:#2e7d8a;--c-mint:#e8f2ec;--c-sky:#f2f7fb;--c-cloud:#f6f7f9;--c-paper:#f7f4ee;--c-card-line:#eceae4;--color-primary:#2e7d59;--color-primary-deep:#245f45;--shadow-card:0 1px 2px rgba(41,40,39,0.04),0 8px 24px rgba(41,40,39,0.06);--shadow-card-hover:0 2px 4px rgba(41,40,39,0.05),0 14px 36px rgba(41,40,39,0.09)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:var(--text-body-md-size);font-weight:var(--weight-460);line-height:var(--text-body-md-lh);color:var(--color-ink);background:var(--color-canvas);-webkit-font-smoothing:antialiased;font-variation-settings:"wght" 460}
a{color:var(--c-green);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--c-green-deep)}
img{display:block;max-width:100%}
.container{max-width:1120px;margin:0 auto;padding:0 var(--spacing-xl)}
.narrow{max-width:760px}
/* ---------- type ---------- */
.d-xxl{font-family:var(--font-display);font-size:clamp(40px,6vw,var(--text-display-xxl-size));font-weight:var(--text-display-xxl-weight);font-variation-settings:"wght" 540;line-height:1.02;letter-spacing:-1.5px;text-wrap:balance}
.d-xl{font-family:var(--font-display);font-size:clamp(30px,4.2vw,42px);font-weight:var(--text-display-xl-weight);font-variation-settings:"wght" 520;line-height:1.08;letter-spacing:-0.9px;text-wrap:balance}
.d-lg{font-family:var(--font-display);font-size:var(--text-display-lg-size);font-weight:var(--text-display-lg-weight);font-variation-settings:"wght" 540;line-height:var(--text-display-lg-lh);letter-spacing:var(--text-display-lg-ls);text-wrap:balance}
.d-md{font-family:var(--font-display);font-size:var(--text-display-md-size);font-weight:var(--weight-540);font-variation-settings:"wght" 540;line-height:1.25;letter-spacing:var(--text-display-md-ls)}
.h-lg{font-family:var(--font-display);font-size:var(--text-heading-lg-size);font-weight:var(--weight-540);font-variation-settings:"wght" 540;line-height:var(--text-heading-lg-lh)}
.accent{color:var(--c-green)}
.lede{font-size:var(--text-body-lg-size);font-weight:var(--weight-460);line-height:1.65;color:var(--color-ink-mute);text-wrap:pretty;max-width:58ch}
.eyebrow{font-size:var(--text-micro-size);font-weight:var(--weight-600);font-variation-settings:"wght" 600;letter-spacing:1.8px;text-transform:uppercase;color:var(--c-teal)}
.mute{color:var(--color-ink-mute)}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--spacing-sm);font-family:var(--font-display);font-size:15px;font-weight:var(--weight-600);font-variation-settings:"wght" 600;line-height:1;padding:14px 26px;text-decoration:none;border:none;cursor:pointer;border-radius:var(--radius-full);transition:background-color 140ms ease,color 140ms ease,border-color 140ms ease,box-shadow 140ms ease}
.btn-primary,.btn-pill,.btn-on-teal{background:var(--c-green);color:#fff}
.btn-primary:hover,.btn-pill:hover,.btn-on-teal:hover{background:var(--c-green-deep);color:#fff}
a.btn-primary,a.btn-pill,a.btn-on-teal{color:#fff}
.btn-outline{background:var(--color-canvas);color:var(--color-ink);border:1px solid var(--c-card-line)}
.btn-outline:hover{border-color:var(--color-ink-faint);color:var(--color-ink)}
/* ---------- nav ---------- */
.nav{background:var(--color-canvas);color:var(--color-ink);border-bottom:1px solid var(--c-card-line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-xxl);padding:30px var(--spacing-xl)}
.nav-logo img{height:55px;border-radius:var(--radius-sm)}
.nav-links{display:flex;align-items:center;justify-content:center;gap:36px;flex:1;min-width:0}
.nav-links a{color:var(--color-ink-mute);text-decoration:none;font-size:15px;white-space:nowrap;transition:color 120ms ease}
.nav-links a:hover{color:var(--color-ink)}
.nav-links a.active{color:var(--color-ink);font-weight:var(--weight-540);font-variation-settings:"wght" 540}
.nav-cta{background:var(--c-green);color:#fff!important;border-radius:var(--radius-full);padding:10px 20px;font-family:var(--font-display);font-size:14px;font-weight:var(--weight-600)!important;font-variation-settings:"wght" 600;text-decoration:none;white-space:nowrap;transition:background-color 140ms ease}
.nav-cta:hover{background:var(--c-green-deep)}
.nav>.container{max-width:none}
.nav-burger{display:none;background:none;border:1px solid var(--c-card-line);border-radius:var(--radius-sm);color:var(--color-ink);font-size:20px;line-height:1;padding:6px 10px;cursor:pointer}
/* ---------- hero (light) ---------- */
.hero{background:var(--color-canvas);color:var(--color-ink);position:relative;overflow:hidden;--color-on-primary:var(--color-ink);--color-on-dark-mute:var(--color-ink-mute);--color-on-dark-faint:var(--color-ink-faint)}
.hero-wash{position:absolute;inset:0;background:radial-gradient(60% 90% at 88% 12%,var(--c-mint) 0%,rgba(242,247,251,0.55) 48%,rgba(255,255,255,0) 78%);pointer-events:none}
.hero-inner{position:relative;padding:104px var(--spacing-xl)}
.hero-inner.compact{padding:72px var(--spacing-xl) 80px}
.hero p.lede{color:var(--color-ink-mute)}
.hero .eyebrow{color:var(--c-teal)}
.hero .crumb{font-size:var(--text-caption-size);color:var(--color-ink-faint);margin-bottom:var(--spacing-lg)}
.hero .crumb a{color:var(--color-ink-faint);text-decoration:none}
.hero .crumb a:hover{color:var(--color-ink)}
.hero a:not(.btn){color:var(--c-green)}
.hero a:not(.btn):hover{color:var(--c-green-deep)}
.photo{width:100%;object-fit:cover;border-radius:var(--radius-lg)}
.hero-photo{width:100%;object-fit:cover;border-radius:14px;min-width:0}
/* ---------- sections ---------- */
.section{padding:var(--section-padding) 0}
.section-sm{padding:var(--spacing-huge) 0}
.section-soft{background:var(--c-cloud)}
.section-paper{background:var(--c-paper)}
/* ---------- image briefs (editor's notes under photo slots — delete once real photos are in) ---------- */
.img-brief{font-size:12px;line-height:1.55;color:var(--color-ink-faint);border-left:2px solid var(--c-card-line);padding:6px 0 6px 12px;margin-top:10px;max-width:52ch}
.img-brief b{color:var(--color-ink-mute);font-weight:var(--weight-540);font-variation-settings:"wght" 540}
/* ---------- client logo grid ---------- */
.logo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg)}
.logo-tile{height:96px;background:var(--color-canvas);border:1px solid var(--c-card-line);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;padding:16px 22px}
.logo-tile img{max-width:100%;max-height:100%;object-fit:contain}
.logo-tile image-slot{filter:grayscale(1);opacity:0.72;transition:opacity 160ms ease,filter 160ms ease}
.logo-tile:hover image-slot{filter:none;opacity:1}
/* ---------- editorial list rows ---------- */
.ed-row{display:flex;gap:24px;padding:26px 0;border-top:1px solid var(--color-hairline)}
.ed-row:last-child{border-bottom:1px solid var(--color-hairline)}
.section-head{max-width:680px;display:flex;flex-direction:column;gap:var(--spacing-lg);margin-bottom:var(--spacing-huge)}
.hairline-top{border-top:1px solid var(--color-hairline)}
/* ---------- grids & cards ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xl)}
.grid-2>*,.grid-3>*,.grid-4>*{min-width:0}
.card image-slot{min-width:0;max-width:100%}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-xl)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-xl)}
.split{display:grid;grid-template-columns:5fr 7fr;gap:var(--spacing-huge);align-items:start}
.card{background:var(--color-canvas);border:1px solid var(--c-card-line);border-radius:var(--radius-lg);padding:var(--spacing-xxl);display:flex;flex-direction:column;gap:var(--spacing-md);box-shadow:var(--shadow-card)}
.card-soft{background:var(--c-cloud);border:none;border-radius:var(--radius-md);padding:var(--spacing-xl);box-shadow:none}
a.card{text-decoration:none;color:var(--color-ink);transition:box-shadow 160ms ease,border-color 160ms ease}
a.card:hover{box-shadow:var(--shadow-card-hover);border-color:#e2dfd7;color:var(--color-ink)}
.card .more{font-size:var(--text-caption-size);font-weight:var(--weight-540);font-variation-settings:"wght" 540;color:var(--c-green);margin-top:auto;text-decoration:underline;text-underline-offset:3px}
.num{font-family:var(--font-display);font-size:var(--text-caption-size);font-weight:var(--weight-600);color:var(--c-teal);letter-spacing:1px}
/* ---------- why rows ---------- */
.why-row{display:grid;grid-template-columns:56px minmax(0,260px) minmax(0,1fr);gap:40px;padding:44px 0;border-top:1px solid var(--color-hairline);align-items:baseline}
.why-row .d-lg{letter-spacing:-0.4px}
.why-row p{color:var(--color-ink-mute);font-size:16px;line-height:1.7;max-width:52ch;text-wrap:pretty}
.why-cred{border-top:1px solid var(--color-hairline);padding-top:30px;margin-top:8px;display:flex;gap:14px;flex-wrap:wrap;font-size:var(--text-caption-size);color:var(--color-ink-mute);letter-spacing:0.3px}
/* ---------- team (editorial partner rows) ---------- */
.team-list{border-bottom:1px solid var(--color-hairline)}
.team-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;padding:52px 0;border-top:1px solid var(--color-hairline);align-items:start}
.team-id{display:flex;flex-direction:column;gap:8px}
.team-portrait{width:180px;aspect-ratio:5/6;object-fit:cover;border-radius:var(--radius-md);margin-bottom:14px}
.team-bio p{font-size:16px;line-height:1.7;color:var(--color-ink);max-width:64ch;text-wrap:pretty}
.team-facts{display:flex;flex-direction:column;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--color-hairline)}
.team-facts span{font-size:var(--text-caption-size);color:var(--color-ink-mute);line-height:1.5}
.team-facts b{display:inline-block;min-width:96px;font-weight:var(--weight-600);font-variation-settings:"wght" 600;color:var(--c-teal);text-transform:uppercase;letter-spacing:1.2px;font-size:var(--text-micro-size)}
/* ---------- editorial service cards ---------- */
.svc-card{padding:40px 32px 32px;gap:20px}
.svc-card .svc-num{font-family:var(--font-display);font-size:60px;font-weight:var(--weight-540);font-variation-settings:"wght" 540;letter-spacing:-2.5px;line-height:1;color:var(--c-green);opacity:0.3;transition:opacity 200ms ease}
.svc-card:hover .svc-num{opacity:1}
.svc-card .d-md{padding-top:18px;border-top:1px solid var(--c-card-line)}
/* ---------- line icons ---------- */
.li-icon{width:44px;height:44px;border-radius:50%;background:var(--c-mint);display:flex;align-items:center;justify-content:center;color:var(--c-green)}
.li-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* ---------- stats ---------- */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-xl)}
.stat{border-top:1px solid var(--color-hairline);padding-top:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-xs)}
.stat b{font-family:var(--font-display);font-size:clamp(36px,4vw,52px);font-weight:var(--weight-540);font-variation-settings:"wght" 540;letter-spacing:-1px;line-height:1;color:var(--c-green)}
.stat span{font-size:var(--text-caption-size);color:var(--color-ink-mute)}
.stat-row-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.stat-row-4{grid-template-columns:1fr 1fr}}
/* ---------- quotes & logos ---------- */
.quote{display:flex;flex-direction:column;gap:var(--spacing-lg);border-top:1px solid var(--color-hairline);padding-top:var(--spacing-xl)}
.quote p{font-family:var(--font-display);font-size:var(--text-heading-lg-size);line-height:1.45;letter-spacing:-0.2px;text-wrap:pretty}
.quote cite{font-style:normal;font-size:var(--text-caption-size);color:var(--color-ink-mute)}
.logo-row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--spacing-xl);align-items:center;margin-bottom:var(--spacing-huge)}
.logo-row image-slot{filter:grayscale(1);opacity:0.75;transition:opacity 160ms ease,filter 160ms ease}
.logo-row image-slot:hover{filter:none;opacity:1}
/* ---------- closing band (light) ---------- */
.teal-band{background:var(--c-mint);color:var(--color-ink);padding:var(--band-padding) 0;--color-on-primary:var(--color-ink);--color-on-dark-mute:var(--color-ink-mute)}
.teal-band .inner{display:flex;flex-direction:column;gap:var(--spacing-xl);max-width:640px}
.teal-band p{color:var(--color-ink-mute);font-size:var(--text-body-lg-size);line-height:1.65;text-wrap:pretty}
.teal-band a:not(.btn){color:var(--c-green-deep)}
.teal-band a.btn-on-teal{color:#fff}
/* ---------- footer ---------- */
.footer{background:var(--color-canvas);color:var(--color-ink-mute);font-size:var(--text-caption-size);border-top:1px solid var(--c-card-line);padding:var(--spacing-huge) 0}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:var(--spacing-xxl)}
.footer-col{display:flex;flex-direction:column;gap:var(--spacing-sm)}
.footer-col b{color:var(--color-ink);font-weight:var(--weight-540);font-variation-settings:"wght" 540;margin-bottom:var(--spacing-xs)}
.footer-col a{color:var(--color-ink-mute);text-decoration:none}
.footer-col a:hover{color:var(--c-green);text-decoration:underline}
.footer-brand{display:flex;flex-direction:column;gap:var(--spacing-md);padding-right:var(--spacing-xl)}
.footer-brand img{height:32px;border-radius:var(--radius-sm);width:fit-content}
.footer-legal{border-top:1px solid var(--color-hairline);margin-top:var(--spacing-xxl);padding-top:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-sm);color:var(--color-ink-faint)}
/* ---------- prose ---------- */
.prose{max-width:720px;display:flex;flex-direction:column;gap:var(--spacing-lg)}
.prose h2{font-family:var(--font-display);font-size:var(--text-display-lg-size);font-weight:var(--weight-540);font-variation-settings:"wght" 540;line-height:var(--text-display-lg-lh);letter-spacing:var(--text-display-lg-ls);margin-top:var(--spacing-xl)}
.prose h3{font-family:var(--font-display);font-size:var(--text-heading-lg-size);font-weight:var(--weight-540);font-variation-settings:"wght" 540;line-height:var(--text-heading-lg-lh);margin-top:var(--spacing-md)}
.prose p,.prose li{font-size:17px;line-height:1.68;color:var(--color-ink);text-wrap:pretty}
.prose ul,.prose ol{padding-left:22px;display:flex;flex-direction:column;gap:var(--spacing-sm)}
.prose blockquote{border-left:2px solid var(--c-green);padding-left:var(--spacing-xl);color:var(--color-ink-mute);font-size:17px;line-height:1.65}
.prose .callout{background:var(--c-mint);border-radius:var(--radius-md);padding:var(--spacing-xl);font-size:15px;line-height:1.65;color:var(--color-ink)}
.prose table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5}
.prose th{text-align:left;font-weight:var(--weight-540);font-variation-settings:"wght" 540;border-bottom:1px solid var(--color-ink-faint);padding:var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 0}
.prose td{border-bottom:1px solid var(--color-hairline);padding:var(--spacing-md) var(--spacing-md) var(--spacing-md) 0;vertical-align:top}
.meta-line{font-size:var(--text-caption-size);color:var(--color-ink-faint);display:flex;gap:var(--spacing-md);flex-wrap:wrap}
/* ---------- checklist ---------- */
.checklist{list-style:none;padding:0;display:flex;flex-direction:column}
.checklist li{display:flex;gap:var(--spacing-md);align-items:baseline;padding:var(--spacing-md) 0;border-bottom:1px solid var(--color-hairline);font-size:16px;line-height:1.55}
.checklist li::before{content:"";flex:0 0 14px;height:14px;border:1.5px solid var(--c-green);border-radius:4px;position:relative;top:2px}
/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:var(--spacing-xs)}
.field span{font-size:var(--text-caption-size);color:var(--color-ink-mute)}
.field input,.field textarea,.field select{background:var(--color-canvas);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-body-md-size);padding:10px var(--spacing-md);border-radius:var(--radius-sm);border:1px solid var(--color-hairline)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--c-green)}
/* ---------- footer legal links ---------- */
.footer-legal-links{display:flex;flex-wrap:wrap;gap:var(--spacing-md) var(--spacing-lg);margin-bottom:var(--spacing-sm)}
.footer-legal-links a{color:var(--color-ink-mute);font-size:var(--text-caption-size);text-decoration:none;border-bottom:1px solid transparent;transition:border-color 120ms ease,color 120ms ease}
.footer-legal-links a:hover{color:var(--color-ink);border-bottom-color:var(--color-ink-faint)}
/* ---------- cookie banner ---------- */
.cookie-banner{position:fixed;left:var(--spacing-lg);right:var(--spacing-lg);bottom:var(--spacing-lg);z-index:120;max-width:640px;margin:0 auto;background:var(--color-primary);color:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-2);padding:var(--spacing-lg) var(--spacing-xl);display:flex;align-items:center;gap:var(--spacing-lg);flex-wrap:wrap}
.cookie-banner p{margin:0;font-size:14px;line-height:1.6;flex:1;min-width:220px}
.cookie-banner a{color:#fff;text-decoration:underline}
.cookie-ok{flex:0 0 auto;background:#fff;color:var(--color-primary);border:none;border-radius:var(--radius-sm);padding:10px 22px;font-family:var(--font-body);font-size:14px;font-weight:var(--weight-540);font-variation-settings:"wght" 540;cursor:pointer;transition:opacity 120ms ease}
.cookie-ok:hover{opacity:.88}
@media (max-width:520px){.cookie-banner{flex-direction:column;align-items:stretch}.cookie-ok{width:100%}}
/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity 500ms ease,transform 500ms ease}
.rv-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* ---------- faq ---------- */
.faq details{border-top:1px solid var(--color-hairline)}
.faq details:last-child{border-bottom:1px solid var(--color-hairline)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-xl);padding:var(--spacing-xl) 0;font-family:var(--font-display);font-size:18px;font-weight:var(--weight-540);font-variation-settings:"wght" 540;letter-spacing:-0.2px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:var(--weight-460);color:var(--c-green);transition:transform 120ms ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 var(--spacing-xl);max-width:680px;display:flex;flex-direction:column;gap:var(--spacing-md)}
.faq .a p{color:var(--color-ink-mute);line-height:1.65}
/* ---------- responsive ---------- */
@media (max-width:1200px){.nav-links{gap:20px}.nav-links a{font-size:14px}.nav-logo img{height:46px}.nav-cta{padding:9px 16px;font-size:13px}}
@media (max-width:960px){.grid-4{grid-template-columns:1fr 1fr}.logo-grid{grid-template-columns:repeat(3,1fr)}.collapse-960{grid-template-columns:1fr!important;gap:40px!important}.footer-cols{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr;gap:var(--spacing-xxl)}.logo-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1024px){
.nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--color-canvas);flex-direction:column;align-items:flex-start;padding:var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);gap:var(--spacing-lg);border-top:1px solid var(--c-card-line);border-bottom:1px solid var(--c-card-line);z-index:50}
.nav-links.open{display:flex}
.nav{position:relative}
.nav-burger{display:block}
}
@media (max-width:760px){
.grid-2,.grid-3{grid-template-columns:1fr}
.stat-row{grid-template-columns:1fr;gap:var(--spacing-lg)}
.logo-row{grid-template-columns:1fr 1fr}
.logo-grid{grid-template-columns:1fr 1fr}
.hero-inner{padding:72px var(--spacing-xl);grid-template-columns:1fr!important;gap:40px!important}
.hero-photo{height:300px!important}
.why-row{grid-template-columns:44px 1fr;row-gap:10px}
.why-row p{grid-column:2}
.team-row{grid-template-columns:1fr;gap:20px}
.section{padding:var(--spacing-huge) 0}
.teal-band{padding:var(--spacing-huge) 0}
}