/* shorenex.com — prototype styles (v1, 2026.10) */
:root{
  --ink:#16302E;
  --ink-soft:#2C3A38;
  --body:#4A4A46;
  --muted:#8A8479;
  --accent:#C05621;
  --line:#DCD5C6;
  --line-soft:rgba(201,194,180,.55);
  --paper:#F7F5F0;
  --card:#FFFFFF;
  --max:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:"Inter","PingFang SC","Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Source Han Serif SC","Noto Serif SC",Georgia,serif;color:var(--ink);margin:0;font-weight:600;letter-spacing:-.01em;}
h1{font-size:clamp(34px,4.6vw,62px);line-height:1.12;}
h2{font-size:clamp(26px,3vw,38px);line-height:1.2;}
h3{font-size:21px;line-height:1.35;}
p{margin:0 0 1em;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}
.mono{font-family:"SFMono-Regular",Menlo,Consolas,monospace;font-size:12px;letter-spacing:.08em;color:var(--accent);text-transform:uppercase;}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.lede{font-size:clamp(17px,1.6vw,21px);color:var(--body);line-height:1.7;max-width:52ch;}
.muted{color:var(--muted);}
.small{font-size:14px;}

/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft);}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;}
.logo{font-family:"Inter",sans-serif;font-weight:700;letter-spacing:.28em;font-size:15px;color:var(--ink);}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:14.5px;}
.nav li a{color:var(--body);padding-bottom:3px;border-bottom:1px solid transparent;transition:.2s;}
.nav li a:hover{color:var(--ink);border-color:var(--accent);}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#F7F5F0;padding:13px 24px;border-radius:2px;font-size:14.5px;letter-spacing:.02em;transition:.2s;}
.btn:hover{background:var(--accent);}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn.ghost:hover{background:var(--ink);color:#F7F5F0;}
.nav .btn{padding:11px 20px;}

/* hero */
/* hero — full-bleed image, text floating on top */
.hero-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:64px;align-items:end;} /* sub-page heroes */
.hero{
  /* ---- hero image config: re-frame the photo without touching anything else ---- */
  --hero-focus-desktop:62% 52%;
  --hero-focus-mobile:88% 46%;
  position:relative;overflow:hidden;min-height:clamp(640px,88vh,820px);display:flex;align-items:flex-end;border-bottom:1px solid var(--line-soft);
}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg picture{display:block;width:100%;height:100%;}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus-desktop);opacity:1;filter:saturate(.76) brightness(1.04);}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(247,245,240,.94) 0%,rgba(247,245,240,.88) 40%,rgba(247,245,240,.46) 66%,rgba(247,245,240,.10) 100%),
    linear-gradient(to bottom,rgba(247,245,240,.38) 0%,rgba(247,245,240,0) 22%,rgba(247,245,240,.10) 72%,rgba(247,245,240,.46) 100%);
}
.hero-inner{position:relative;z-index:2;width:100%;padding-top:132px;padding-bottom:54px;}
.hero-copy{max-width:660px;}
.hero .label{display:inline-block;margin-bottom:22px;}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.hero-facts{display:grid;grid-template-columns:repeat(4,auto);gap:0 34px;justify-content:start;margin:46px 0 0;padding-top:24px;border-top:1px solid rgba(22,48,46,.17);}
.hero-facts dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.hero-facts dd{margin:5px 0 0;font-size:14px;color:var(--ink);}

section{padding:80px 0;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:44px;border-bottom:1px solid var(--line);padding-bottom:22px;}
.section-head .num{font-size:12px;letter-spacing:.14em;color:var(--muted);}

/* chain */
.chain{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line);}
.chain div{padding:22px 20px 24px;border-right:1px solid var(--line);background:var(--card);}
.chain div:last-child{border-right:none;}
.chain b{display:block;font-family:"Source Han Serif SC",Georgia,serif;font-size:18px;color:var(--ink);margin-bottom:6px;}
.chain span{font-size:13px;color:var(--muted);}
.chain-legend{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}

/* two entries */
.entries{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.entry{background:var(--card);border:1px solid var(--line);padding:40px 36px 36px;display:flex;flex-direction:column;min-height:340px;transition:.25s;}
.entry:hover{border-color:var(--ink);transform:translateY(-2px);}
.entry .kicker{margin-bottom:18px;}
.entry h3{font-size:29px;margin-bottom:14px;}
.entry ul{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:11px;}
.entry li{display:flex;gap:10px;font-size:15px;color:var(--ink-soft);}
.entry li::before{content:"";width:4px;height:4px;background:var(--accent);margin-top:11px;flex:none;}
.entry .go{margin-top:auto;font-size:14.5px;color:var(--accent);letter-spacing:.02em;}

/* case */
.case{background:var(--ink);color:#EDE9DF;padding:70px 0;}
.case h2{color:#F7F5F0;}
.case-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;}
.stat b{display:block;font-family:"Source Han Serif SC",Georgia,serif;font-size:38px;color:#F7F5F0;line-height:1;}
.stat span{font-size:12.5px;color:rgba(237,233,223,.62);}
.quote-mark{font-family:Georgia,serif;font-size:64px;line-height:.6;color:var(--accent);}

/* facts */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.facts div{padding:34px 30px 34px 0;border-right:1px solid var(--line-soft);}
.facts div:last-child{border-right:none;}
.facts b{display:block;font-size:32px;font-family:"Source Han Serif SC",Georgia,serif;color:var(--ink);}
.facts.words b{font-size:21px;line-height:1.3;margin-bottom:8px;}
.facts.words div{padding-top:26px;padding-bottom:26px;}
.facts span{font-size:14px;color:var(--muted);}

/* faq */
details{border-bottom:1px solid var(--line);padding:22px 0;}
details summary{cursor:pointer;list-style:none;font-size:18px;color:var(--ink);display:flex;justify-content:space-between;gap:20px;}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:"+";color:var(--accent);font-size:20px;}
details[open] summary::after{content:"–";}
details p{margin:14px 0 0;max-width:72ch;color:var(--body);}

/* footer */
footer.site{background:#12241F;color:rgba(237,233,223,.72);padding:64px 0 40px;font-size:14px;}
footer.site h4{color:#F7F5F0;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 16px;font-weight:600;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
footer.site a:hover{color:#F7F5F0;}
.foot-bottom{border-top:1px solid rgba(237,233,223,.16);margin-top:48px;padding-top:24px;display:flex;justify-content:space-between;gap:20px;font-size:12.5px;color:rgba(237,233,223,.5);}

/* page hero (sub-pages) */
.page-hero{padding:78px 0 54px;border-bottom:1px solid var(--line);}
.page-hero .hero-grid{align-items:start;}
.crumb{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:26px;}
.crumb a{color:var(--accent);}

/* spec list beside the page hero */
.hero-aside{border-top:1px solid var(--ink);padding-top:20px;}
.hero-aside dl{margin:0;display:grid;gap:0;}
.hero-aside dl > div{
  display:grid;grid-template-columns:92px 1fr;gap:18px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line-soft);
}
.hero-aside dl > div:last-child{border-bottom:none;}
.hero-aside dt{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);line-height:1.6;}
.hero-aside dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft);}

/* work grid */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.work figure{margin:0;}
.ph{aspect-ratio:4/5;background:linear-gradient(135deg,#E8E2D5,#D9D2C2);display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.12em;color:#9A9384;text-transform:uppercase;border:1px solid var(--line);}
.work figcaption{padding-top:12px;font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.work figcaption b{color:var(--ink);font-weight:600;}
.work figcaption span{text-align:right;}

/* tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.tier{border:1px solid var(--line);background:var(--card);padding:32px 28px;display:flex;flex-direction:column;}
.tier.hl{border-color:var(--ink);box-shadow:0 12px 30px rgba(22,48,46,.07);}
.tier .name{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.tier .price{font-family:"Source Han Serif SC",Georgia,serif;font-size:30px;color:var(--ink);margin:12px 0 4px;}
.tier .from{font-size:12.5px;color:var(--muted);margin-bottom:22px;}
.tier ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14.5px;color:var(--ink-soft);}
.tier li{padding-bottom:10px;border-bottom:1px dashed var(--line-soft);}

/* people */
.people{display:grid;grid-template-columns:1fr 1fr;gap:36px;}
.person{border-top:2px solid var(--ink);padding-top:24px;}
.person .role{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.person h3{margin:10px 0 6px;}
.person p{font-size:15px;}
.cv{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:2px;}
.cv:hover{color:var(--accent);}

/* clusters */
.cluster{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;padding:52px 0;border-bottom:1px solid var(--line);}
.cluster:first-of-type{padding-top:0;}
.cluster h3{font-size:26px;margin-bottom:16px;}
.cluster .anchor{font-family:"SFMono-Regular",Menlo,monospace;font-size:12px;color:var(--muted);display:block;margin-bottom:10px;}
.cluster ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.cluster li{display:flex;gap:12px;font-size:15.5px;}
.cluster li::before{content:"";width:4px;height:4px;background:var(--accent);margin-top:12px;flex:none;}

/* table */
table{width:100%;border-collapse:collapse;font-size:15px;}
th,td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top;}
th{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--ink);}
td:first-child{color:var(--ink);font-weight:500;}

/* cta band */
.cta-band{background:var(--ink);color:#EDE9DF;padding:64px 0;}
.cta-band h2{color:#F7F5F0;margin-bottom:14px;}
.cta-band .row{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.cta-band .btn{background:#F7F5F0;color:var(--ink);}
.cta-band .btn:hover{background:var(--accent);color:#fff;}

@media (max-width:900px){
  .hero-grid,.entries,.case-grid,.work,.tiers,.people,.cluster,.facts,.foot-grid{grid-template-columns:1fr;}
  /* mobile hero — A: copy floats over the photo (current)
     to switch to "photo on top, copy below", replace this block with:
     .hero{min-height:0;display:block;padding-top:clamp(300px,52vh,470px);}
     .hero-bg{top:0;bottom:auto;height:clamp(300px,52vh,470px);}
     .hero-inner{padding-top:42px;padding-bottom:40px;}
     .hero-bg::after{background:linear-gradient(to bottom,rgba(247,245,240,.04) 0%,rgba(247,245,240,.10) 42%,rgba(247,245,240,.58) 76%,rgba(247,245,240,.93) 93%,var(--paper) 100%);}
     .hero-copy::before{display:none;} */
  /* --hero-photo-height: how tall the photo is. --hero-copy-start: where the
     copy begins. copy-start < photo-height = text overlaps the photo's fade. */
  .hero{--hero-photo-height:68vh;--hero-copy-start:46vh;min-height:0;display:block;padding-top:var(--hero-copy-start);}
  .hero-bg{top:0;bottom:auto;height:var(--hero-photo-height);}
  .hero-inner{padding-top:64px;padding-bottom:44px;}
  .hero-bg img{object-position:var(--hero-focus-mobile);}
  .hero-bg::after{background:linear-gradient(to bottom,rgba(247,245,240,.02) 0%,rgba(247,245,240,.10) 40%,rgba(247,245,240,.58) 56%,rgba(247,245,240,.90) 70%,rgba(247,245,240,.97) 82%,var(--paper) 100%);}
  .hero-copy{position:relative;}
  .hero-copy::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    inset:-30px -26px -26px -34px;
    background:radial-gradient(115% 95% at 18% 50%,rgba(247,245,240,.66) 0%,rgba(247,245,240,.46) 45%,rgba(247,245,240,0) 76%);
  }
  .hero-facts{grid-template-columns:1fr 1fr;gap:20px 24px;margin-top:34px;}
  .chain{grid-template-columns:1fr 1fr;}
  .chain div{border-bottom:1px solid var(--line);}
  .nav{height:auto;flex-wrap:wrap;padding:14px 0;row-gap:12px;}
  .nav ul{display:flex;order:3;width:100%;gap:18px;font-size:13.5px;border-top:1px solid var(--line-soft);padding-top:12px;}
  section{padding:56px 0;}
  .wrap{padding:0 22px;}
}

@media (max-width:480px){
  .hero h1{font-size:31px;}
  .hero-inner{padding-top:62px;}
  .hero-copy,.hero-facts{max-width:100%;}
  .hero-cta .btn{width:100%;text-align:center;}
}

/* mailto fallback + copy buttons */
.copy{
  background:none;border:0;padding:0 0 1px;margin-left:8px;font:inherit;font-size:12px;letter-spacing:.04em;
  color:var(--muted);cursor:pointer;border-bottom:1px solid var(--line);transition:.2s;
}
.copy:hover{color:var(--accent);border-color:var(--accent);}
.sx-toast{
  position:fixed;left:0;right:0;bottom:26px;margin:0 auto;z-index:200;
  width:fit-content;max-width:min(620px,calc(100vw - 32px));
  transform:translateY(10px);
  display:flex;align-items:center;gap:14px;
  background:var(--ink);color:#EDE9DF;padding:14px 16px 14px 18px;border-radius:3px;
  font-size:14.5px;line-height:1.5;box-shadow:0 18px 44px rgba(22,48,46,.26);
  opacity:0;transition:opacity .24s ease,transform .24s ease;
}
.sx-toast.show{opacity:1;transform:translateY(0);}
.sx-toast b{color:#fff;font-weight:600;font-family:"SFMono-Regular",Menlo,Consolas,monospace;font-size:13.5px;}
.sx-toast button{
  flex:none;background:transparent;border:1px solid rgba(247,245,240,.42);color:#F7F5F0;
  padding:7px 13px;border-radius:2px;font:inherit;font-size:13px;cursor:pointer;transition:.2s;
}
.sx-toast button:hover{background:rgba(247,245,240,.16);}
.sx-toast .sx-close{border:0;padding:4px 6px;font-size:19px;line-height:1;opacity:.6;}
.sx-toast .sx-close:hover{opacity:1;background:transparent;}
@media (max-width:480px){
  .sx-toast{left:16px;right:16px;bottom:16px;width:auto;max-width:none;flex-wrap:wrap;gap:10px 12px;}
  .sx-toast span{flex:1 1 100%;}
  .sx-toast .sx-close{margin-left:auto;}
}

/* anchor targets must clear the sticky header */
section[id],div[id]{scroll-margin-top:96px;}
@media (max-width:900px){section[id],div[id]{scroll-margin-top:118px;}}

/* ---------- enquiry form ---------- */
.contact{background:var(--card);border-top:1px solid var(--line);}
.contact-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:80px;align-items:start;}
.contact-lead h2{margin:16px 0 18px;}
.contact-points{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:0;font-size:14.5px;color:var(--ink-soft);line-height:1.55;}
.contact-points li{display:grid;grid-template-columns:18px 1fr;gap:10px;padding:13px 0;border-bottom:1px solid var(--line-soft);}
.contact-points li:first-child{padding-top:0;}
.contact-points li::before{content:"—";color:var(--accent);line-height:1.55;}
.contact-alt{margin-top:26px;font-size:13.5px;color:var(--muted);}

.contact-form{display:block;}
.form-fields{display:grid;gap:18px;}
.field{display:grid;gap:7px;}
.field > label{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);}
.field > label .req{color:var(--accent);}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);background:#fff;border-radius:2px;
  font:inherit;font-size:15px;line-height:1.4;color:var(--ink);transition:border-color .2s,box-shadow .2s;
}
.field input::placeholder,.field textarea::placeholder{color:#B4AE9F;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(22,48,46,.07);}
.field textarea{min-height:118px;resize:vertical;}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%238A8479' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field.err input,.field.err select,.field.err textarea{border-color:#B4432B;}
.field .msg{font-size:12.5px;color:#B4432B;display:none;}
.field.err .msg{display:block;}

.form-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:4px;}
.form-foot .btn{cursor:pointer;border:0;}
.form-foot .btn[disabled]{opacity:.55;cursor:default;}
.form-note{font-size:12.5px;color:var(--muted);max-width:32ch;line-height:1.5;}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none;}

.form-done{display:none;border:1px solid var(--line);background:var(--paper);padding:34px 30px;border-radius:2px;}
.form-done h3{margin-bottom:12px;}
.form-done p:last-child{margin-bottom:0;}
.contact-form.is-sent .form-fields{display:none;}
.contact-form.is-sent .form-done{display:block;}

/* form states on small screens */
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:30px;}
  .field-row{grid-template-columns:1fr;gap:18px;}
  /* on a phone the trust list pushes the form a full screen down — drop it,
     the same points live in the FAQ and in the lead paragraph */
  .contact-points{display:none;}
  .contact{padding-top:56px;padding-bottom:60px;}
  .contact-lead h2{margin:12px 0 14px;}
  .contact-alt{margin-top:18px;}
}