/* shorea.solutions page styles, draft one, Sep 5 2026. Tokens live in shorea-brand.css (approved brand v1.0).
   Layout rules from the designer README: 1200px container, fluid grids, 1px ink-10 borders, 6 to 8px radii, no shadows. */
:root{--gutter:clamp(20px,4vw,48px);--rhythm:clamp(64px,8vw,120px);--container:1200px}
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:var(--rhythm)}
.section-light{background:var(--shorea-ground)}
.section-white{background:var(--shorea-white)}
.section-ink{background:var(--shorea-ink);color:var(--shorea-ground)}
.section-ink a{color:var(--shorea-gold-40)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--shorea-ink-60)}
.section-ink .eyebrow{color:var(--shorea-gold-40)}
h1,.h1{font-size:var(--h1);font-weight:300;line-height:1.1;letter-spacing:-.01em;max-width:16ch}
h2,.h2{font-size:var(--h2);font-weight:300;line-height:1.15;max-width:20ch}
h3,.h3{font-size:var(--h3);font-weight:700;line-height:1.3}
h4,.h4{font-size:var(--h4);font-weight:700;line-height:1.35}
.lead{font-size:var(--lead);line-height:1.6;color:var(--shorea-ink-80);max-width:60ch}
.section-ink .lead,.section-ink p{color:var(--shorea-ink-10)}
.stack>*+*{margin-top:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;border-radius:6px;border:1px solid transparent;text-decoration:none;cursor:pointer;min-height:44px;transition:background .15s ease,color .15s ease}
.btn-primary{background:var(--shorea-ink);color:var(--shorea-ground);border-color:var(--shorea-ink);padding:14px 26px;font-size:16px}
.btn-primary:hover{background:var(--shorea-ink-80);border-color:var(--shorea-ink-80);color:var(--shorea-ground)}
.btn-primary:active{background:#0B1226}
.btn-accent{background:var(--shorea-gold);color:var(--shorea-ink);border-color:var(--shorea-gold);padding:14px 26px;font-size:16px}
.btn-accent:hover{background:var(--shorea-gold-40);border-color:var(--shorea-gold-40);color:var(--shorea-ink)}
.btn-small{padding:11px 20px;font-size:14px}
.btn-ghost{background:transparent;color:var(--shorea-ink);border-color:var(--shorea-ink);padding:12px 22px;font-size:15px}
.section-ink .btn-ghost{color:var(--shorea-ground);border-color:var(--shorea-ink-10)}
/* header */
.site-header{position:sticky;top:0;z-index:30;background:var(--shorea-ground);border-bottom:1px solid var(--shorea-ink-10)}
.site-header .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:14px}
.logo img{height:34px;width:auto}
/* hero */
.hero{display:flex;flex-wrap:wrap;align-items:stretch}
.hero-copy{flex:1 1 540px;padding:var(--rhythm) var(--gutter) var(--rhythm) max(var(--gutter),calc((100% - 1200px)/2))}
.hero-copy .stack>*+*{margin-top:24px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.hero-note{font-size:14px;color:var(--shorea-ink-60)}
.hero-referral{font-size:15px;color:var(--shorea-ink-80);max-width:48ch}
.hero-photo{flex:1 1 440px;min-height:clamp(320px,42vw,560px);position:relative}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center}
.hero-photo img.hero-illustration{object-fit:contain;object-position:center;background:var(--shorea-ground);padding:24px}
@media (max-width:1023px){.hero-photo{min-height:260px}.hero-copy{padding-top:48px;padding-bottom:48px}}
/* credential strip */
.strip{background:var(--shorea-white);border-top:1px solid var(--shorea-ink-10);border-bottom:1px solid var(--shorea-ink-10)}
.strip .container{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 40px;padding-block:32px}
@media (max-width:1023px){.strip .container{grid-template-columns:repeat(2,1fr)}}
@media (max-width:639px){.strip .container{grid-template-columns:1fr;gap:28px}}
.strip .value{font-weight:700;font-size:16px;margin-top:8px}
.strip .support{font-size:14px;color:var(--shorea-ink-60);margin-top:4px;line-height:1.5}
/* proof */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px;align-items:center}
.frame{aspect-ratio:16/10;border:1px solid rgba(224,223,220,.22);border-radius:8px;overflow:hidden;background:#0B1226;padding:0;cursor:zoom-in;width:100%;display:block}
.frame img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.frame:focus-visible{outline:2px solid var(--shorea-gold);outline-offset:4px}
.caption{font-size:14px;color:var(--shorea-ink-40);margin-top:12px}
.section-ink .caption{color:var(--shorea-ink-20)}
/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
@media (max-width:1023px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:639px){.cards{grid-template-columns:1fr}}
.card{background:var(--shorea-white);border:1px solid var(--shorea-ink-10);border-radius:8px;padding:32px 28px}
.card h3{margin-bottom:12px}
.card p{color:var(--shorea-ink-80)}
/* reveal */
.reveal{border-top:1px solid var(--shorea-ink-10);border-bottom:1px solid var(--shorea-ink-10)}
.goldbar{width:56px;height:3px;background:var(--shorea-gold);margin-bottom:24px}
/* method rows */
.steps{margin-top:40px;border-top:1px solid var(--shorea-ink-10)}
.step{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px 40px;padding:32px 0;border-bottom:1px solid var(--shorea-ink-10)}
.step .num{font-size:clamp(30px,3vw,40px);font-weight:300;color:var(--shorea-ink-60);flex:0 0 64px}
.step h4{flex:0 0 260px}
.step p{flex:1 1 min(100%,420px);color:var(--shorea-ink-80)}
.two-up{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px;margin-top:56px}
.rule-gold{border-top:3px solid var(--shorea-gold);padding-top:20px}
.rule-ink{border-top:3px solid var(--shorea-ink-20);padding-top:20px}
.rule-gold p,.rule-ink p{color:var(--shorea-ink-80);margin-top:12px}
.demo{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:40px;align-items:center}
.demo .frame{border-color:var(--shorea-ink-10);background:var(--shorea-white);cursor:default}
.badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--shorea-gold-40);color:var(--shorea-ink);border-radius:6px;padding:6px 10px}
/* contracting */
.facts-card{background:var(--shorea-white);border:1px solid var(--shorea-ink-10);border-radius:8px;padding:clamp(28px,4vw,48px)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px 40px;margin-top:32px}
.facts dt{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--shorea-ink-60)}
.facts dd{margin-top:8px;color:var(--shorea-ink-80);line-height:1.6}
/* questions */
.qa{display:flex;flex-wrap:wrap;gap:40px 64px}
.qa-head{flex:1 1 300px}
.qa-list{flex:1 1 min(100%,520px);max-width:760px;border-top:1px solid var(--shorea-ink-10)}
.qa-list details{border-bottom:1px solid var(--shorea-ink-10)}
.qa-list summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;font-weight:700;font-size:16px;min-height:44px}
.qa-list summary [data-chev]{display:inline-block;transition:transform .18s ease;color:var(--shorea-ink-60);font-weight:400;font-size:22px;line-height:1}
.qa-list details p{padding:0 0 24px;color:var(--shorea-ink-80);max-width:64ch}
/* closing */
.closing .btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:32px}
.crosslink{margin-top:40px;font-size:15px;color:var(--shorea-ink-20)}
/* footer */
.site-footer{background:var(--shorea-ground);border-top:1px solid var(--shorea-ink-10);padding-block:48px}
.site-footer .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px 48px;font-size:14px;line-height:22px;color:var(--shorea-ink-80)}
.site-footer img{height:28px;width:auto;margin-bottom:12px}
.site-footer a{color:var(--shorea-ink-80)}
/* dialogs */
dialog{border:1px solid var(--shorea-ink-10);border-radius:8px;padding:0;background:var(--shorea-white);color:var(--shorea-ink);max-width:min(92vw,640px);width:100%}
dialog::backdrop{background:rgba(16,26,51,.72)}
dialog.lightbox{max-width:min(96vw,1400px);background:#0B1226;border-color:rgba(224,223,220,.22)}
dialog.lightbox{padding-top:64px}
dialog.lightbox .close{position:absolute;top:12px;right:12px;z-index:2;color:var(--shorea-ground);border-color:rgba(224,223,220,.4)}
dialog.lightbox img{display:block;width:100%;height:auto;max-height:85vh;object-fit:contain}
@media (max-width:639px){dialog.lightbox{overflow:auto;max-height:92vh}dialog.lightbox img{width:190vw;max-width:none;max-height:none}}
.dialog-body{padding:clamp(24px,4vw,40px)}
.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.close{background:none;border:1px solid var(--shorea-ink-20);border-radius:6px;width:44px;height:44px;cursor:pointer;font-size:20px;line-height:1;color:var(--shorea-ink)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 20px;margin-top:24px}
.field{display:flex;flex-direction:column;gap:6px}
.field.wide{grid-column:1/-1}
.field label{font-size:13px;font-weight:700;color:var(--shorea-ink-80)}
.field input,.field textarea,.field select{font:inherit;color:var(--shorea-ink);border:1px solid var(--shorea-ink-20);border-radius:6px;padding:12px 14px;background:var(--shorea-white);min-height:44px}
.field textarea{min-height:110px;resize:vertical}
.form-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:24px}
.form-note{font-size:13px;color:var(--shorea-ink-60);max-width:44ch}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:16px;font-size:14px;color:var(--shorea-ink-80)}
/* consent banner */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:40;background:var(--shorea-white);border:1px solid var(--shorea-ink-10);border-radius:8px;padding:16px 20px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;font-size:14px;color:var(--shorea-ink-80);max-width:var(--container);margin:0 auto}
.consent[hidden]{display:none}
.consent .actions{display:flex;gap:10px}
.skip{position:absolute;left:-9999px;top:0;background:var(--shorea-ink);color:var(--shorea-ground);padding:8px 12px}
.skip:focus{left:16px;top:16px;z-index:50}