/* Layout: asymmetric two-column splits with large photo blocks. No cards and no borders —
   separation comes from tinted bands and generous space. Orange appears only on actions. */
:root{
  --paper:#faf8f5; --surface:#fff; --tint:#f1ede7; --steel:#27404e; --steel-2:#375768;
  --ink:#15120f; --ink-2:#55504a; --muted:#8a837b; --line:#e5e0d8;
  --orange:#f6901e; --orange-dk:#e07b12; --orange-ink:#a85a0c;
  --f-disp:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --f-body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);
  font-size:17.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.band{padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1200px;margin:0 auto}
section{padding-block:clamp(44px,7vw,92px)}
.tinted{background:var(--tint)}
.dark{background:var(--steel);color:#eef2f4}

h1,h2,h3{font-family:var(--f-disp);margin:0;font-weight:800;letter-spacing:-.025em;
  text-wrap:balance;line-height:1.03}
h1{font-size:clamp(36px,6.2vw,66px)}
h2{font-size:clamp(27px,4vw,44px)}
h3{font-size:clamp(18px,2.1vw,22px);font-weight:700;letter-spacing:-.015em;line-height:1.2}
p{margin:0}
.lede{font-size:clamp(17.5px,1.9vw,20.5px);line-height:1.5;color:var(--ink-2);max-width:54ch}
.copy{color:var(--ink-2);max-width:62ch}
.copy+.copy{margin-top:15px}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange-ink);display:block;margin-bottom:13px}
.dark .eyebrow{color:#f9b45c}
.dark .lede,.dark .copy{color:#c6d2d8}

/* header */
.top{background:var(--paper);border-bottom:1px solid var(--line)}
.topin{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:15px;flex-wrap:wrap}
.mark{display:block;line-height:0;text-decoration:none;flex:none}
.mark img{height:54px;width:auto;max-width:100%}
@media(max-width:719px){.mark img{height:42px}}
footer .mark img{height:58px}
.topr{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.phone{font-weight:700;white-space:nowrap;color:var(--ink);text-decoration:none}
nav.brands{background:var(--paper);border-bottom:1px solid var(--line)}
nav.brands ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;overflow-x:auto;
  scrollbar-width:none}
nav.brands ul::-webkit-scrollbar{display:none}
nav.brands a{display:block;padding:12px 14px;color:var(--ink-2);text-decoration:none;
  font-size:15.5px;font-weight:600;white-space:nowrap}
nav.brands a:hover{color:var(--orange-ink)}
nav.brands a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--orange)}

.btn{display:inline-flex;align-items:center;gap:9px;background:var(--orange);color:var(--ink);
  text-decoration:none;font-weight:700;font-size:16.5px;padding:14px 24px;border-radius:4px;
  line-height:1.1;border:0}
.btn:hover{background:var(--orange-dk)}
.btn.quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.quiet:hover{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink)}
.dark .btn.quiet{color:#eef2f4;box-shadow:inset 0 0 0 1.5px rgba(238,242,244,.35)}
.dark .btn.quiet:hover{box-shadow:inset 0 0 0 1.5px #eef2f4}
.btn svg{width:17px;height:17px;fill:currentColor;flex:none}
a:focus-visible,summary:focus-visible{outline:2px solid var(--orange-ink);outline-offset:3px}

.split{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
.split>*{min-width:0}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr;gap:58px}}
.hero .acts{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px}
.meta{display:flex;gap:24px;flex-wrap:wrap;margin-top:26px;font-size:15.5px;color:var(--muted)}
.meta b{display:block;color:var(--ink);font-weight:700;font-size:16.5px}

.pic{margin:0;min-width:0}
.pic img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.pic.tall img{aspect-ratio:3/4}
.pic.wide img{aspect-ratio:16/7}
.pic figcaption{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.45}
.strip3{display:grid;gap:14px;grid-template-columns:1fr;margin-top:26px}
.strip3>*{min-width:0}
@media(min-width:720px){.strip3{grid-template-columns:repeat(3,1fr)}}

.chips{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0;padding:0}
.chips li{background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font-size:15px;font-weight:600;color:var(--ink-2)}

.brands-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:620px){.brands-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.brands-grid{grid-template-columns:repeat(4,1fr)}}
.brand{background:var(--paper);padding:24px 18px;text-decoration:none;color:var(--ink);display:block;
  transition:background .15s ease}
.brand:hover{background:var(--surface)}
.brand b{font-family:var(--f-disp);font-weight:700;font-size:21px;letter-spacing:-.02em;
  display:block;margin-bottom:4px}
.brand:hover b{color:var(--orange-ink)}
.brand .n{font-size:14px;font-weight:700;color:var(--orange);display:block;margin-bottom:5px}
.brand span.m{font-size:14px;color:var(--muted);line-height:1.45;display:block}

.lines{display:grid;grid-template-columns:1fr;margin-top:6px}
@media(min-width:800px){.lines{grid-template-columns:1fr 1fr;column-gap:46px}}
.line{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line);min-width:0}
.line h3{margin:0}
.line p{color:var(--ink-2);font-size:16px;min-width:0}

.mix{display:grid;grid-template-columns:1fr;gap:0;margin-top:22px}
@media(min-width:720px){.mix{grid-template-columns:1fr 1fr;column-gap:46px}}
.mixrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.mixrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--orange);flex:none}
.mixrow .lbl{font-weight:600;min-width:0;flex:1;font-size:17px}

.flow{display:grid;grid-template-columns:1fr;gap:28px;margin-top:32px}
@media(min-width:820px){.flow{grid-template-columns:repeat(3,1fr);gap:38px}}
.fstep .num{font-family:var(--f-disp);font-weight:800;font-size:44px;line-height:1;color:#f9b45c;
  display:block;margin-bottom:11px;letter-spacing:-.04em}
.fstep h3{margin-bottom:8px}
.fstep p{color:#c6d2d8;font-size:16.5px}

.facts{margin:0}
.facts>div{display:grid;grid-template-columns:1fr;gap:2px;padding:15px 0;border-bottom:1px solid var(--line)}
@media(min-width:560px){.facts>div{grid-template-columns:140px minmax(0,1fr);gap:18px}}
.facts dt{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;min-width:0}

details{border-bottom:1px solid var(--line);padding:18px 0}
summary{font-family:var(--f-disp);font-weight:700;font-size:20px;letter-spacing:-.015em;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:baseline;line-height:1.25}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--orange-ink);font-weight:700;font-size:22px;flex:none;font-family:var(--f-body)}
details[open] summary::after{content:"\2013"}
details p{color:var(--ink-2);padding-top:11px;max-width:66ch;font-size:16.5px}

.rel{display:grid;grid-template-columns:1fr;gap:22px;margin-top:8px}
@media(min-width:760px){.rel{grid-template-columns:repeat(3,1fr)}}
.rel a{text-decoration:none;color:var(--ink)}
.rel h3{margin-bottom:6px}
.rel a:hover h3{color:var(--orange-ink)}
.rel p{color:var(--muted);font-size:15.5px}

.crumbs{font-size:14.5px;color:var(--muted);padding-top:18px}
.crumbs a{color:var(--muted)}

footer{background:var(--steel);color:#c6d2d8;padding-block:46px 30px}
.fgrid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:760px){.fgrid{grid-template-columns:1.7fr 1fr 1fr}}
footer h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#8fa6b2;margin:0 0 12px;font-weight:700}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:8px}
footer a{color:#dbe4e8;text-decoration:none;font-size:16px}
footer a:hover{color:#f6901e}
.social{list-style:none;margin:16px 0 0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  border-radius:999px;padding:9px 15px 9px 12px;font-size:15px;font-weight:600;line-height:1}
.social svg{width:18px;height:18px;fill:currentColor;flex:none}
footer .social a{background:rgba(238,242,244,.1);color:#dbe4e8}
footer .social a:hover{background:var(--orange);color:var(--ink)}
.social.light a{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.social.light a:hover{background:var(--orange);color:var(--ink);box-shadow:none}
.legal{border-top:1px solid rgba(238,242,244,.16);margin-top:30px;padding-top:18px;font-size:14px;color:#8fa6b2}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--orange);
  padding-top:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));text-align:center}
.dock a{color:var(--ink);text-decoration:none;font-weight:700;font-size:17px}
@media(min-width:900px){.dock{display:none}}
body{padding-bottom:66px}
@media(min-width:900px){body{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}