/* Active Elements shared styles, version 2.
   Direction: clean, athletic, mostly colourless interface so the photography does the talking.
   Theme follows the time of day: day (white), dusk (warm yellow and orange), night (black).
   Body type is Atkinson Hyperlegible (made for low-vision readers). Headings are Archivo, set heavy and tight. */
:root{
  --bg:#FFFFFF;--surface:#F3F4F5;--ink:#0B0B0C;--muted:#4F545A;--line:#E1E3E6;
  --accent:#C23A0A;--btn:#0B0B0C;--btn-ink:#FFFFFF;
  --warn-bg:#FFF3D6;--warn-ink:#5A3A00;--warn-line:#E0B95A;--alert:#B3261E;--focus:#1F6BAE;
  --earth:#47742C;--water:#1F6BAE;--fire:#BE4515;--air:#6650BC;--on-el:#FFFFFF;
  --b-low:#3F7FBF;--b-ideal:#1E8A6E;--b-raised:#C28F10;--b-high:#D9651A;--b-very:#B3261E;
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --wrap:1180px;color-scheme:light;font-size:18px;
}
html[data-phase="dusk"]{
  --bg:#FFE2A0;--surface:rgba(255,248,228,.66);--ink:#2A1606;--muted:#452A0D;--line:rgba(120,60,10,.28);
  --accent:#8F2A02;--btn:#2A1606;--btn-ink:#FFF5DD;
  --warn-bg:#FFF8E6;--warn-ink:#5A3A00;--warn-line:#D9A640;--focus:#6E2000;
}
html[data-phase="night"]{
  --bg:#000000;--surface:#121315;--ink:#F4F4F5;--muted:#A5ABB2;--line:#26282B;
  --accent:#FF8A4C;--btn:#FFFFFF;--btn-ink:#0B0B0C;
  --warn-bg:#2C230C;--warn-ink:#F8DFAA;--warn-line:#6B5320;--alert:#FF8A80;--focus:#7DB8F0;
  --earth:#9BCB7A;--water:#7DB8F0;--fire:#F2926A;--air:#B1A2F2;--on-el:#0B0B0C;
  --b-low:#7DB2E8;--b-ideal:#4FC3A1;--b-raised:#EDBE45;--b-high:#F29550;--b-very:#FF7A70;color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:84px;background:var(--bg)}
body{margin:0;background:transparent;color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.6;-webkit-text-size-adjust:100%;position:relative}
/* the dusk gradient sits behind everything and fades in, because gradients cannot be transitioned directly */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#FFEDB8 0%,#FFD184 50%,#FFA960 100%);opacity:0;pointer-events:none}
html[data-phase="dusk"] body::before{opacity:1}
html.themed body::before{transition:opacity 1.4s ease}
html.themed,html.themed .site-head,html.themed .card,html.themed .site-foot,html.themed .notice,html.themed .tier{transition:background-color 1.4s ease,color 1.4s ease,border-color 1.4s ease}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.05;text-wrap:balance;letter-spacing:-.025em;font-weight:800}
h1{font-size:clamp(2.3rem,1.2rem + 5vw,4.6rem);font-weight:900;letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,1.1rem + 2.2vw,2.7rem)}
h3{font-size:1.3rem;letter-spacing:-.015em}
p{margin:0;max-width:68ch}
ul,ol{margin:0}
a{color:var(--ink);text-underline-offset:3px}
a:hover{color:var(--accent)}
small{font-size:.86rem;color:var(--muted)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--btn);color:var(--btn-ink);padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:12px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.stack{display:flex;flex-direction:column;gap:16px}
.stack-lg{display:flex;flex-direction:column;gap:36px}
.lead{color:var(--muted);font-size:1.12rem}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.site-head .wrap{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.mark:hover{color:var(--ink)}
.mark svg{width:46px;height:46px;flex:none}
.mark b{font:900 1.35rem/1 var(--font-display);letter-spacing:-.03em}
.head-tools{display:flex;align-items:center;gap:8px}
.icon-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{border-color:var(--ink)}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-toggle{display:none;min-height:46px;padding:0 18px;border:1.5px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:700 1rem var(--font-body);cursor:pointer}
.nav{display:flex;align-items:center;gap:2px}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 13px;border-radius:999px;color:var(--ink);font-weight:700;text-decoration:none;font-size:.97rem}
.nav a:hover{background:var(--surface);color:var(--ink)}
.nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--accent);border-radius:0}
.nav a.join{margin-left:8px;background:var(--btn);color:var(--btn-ink);padding-inline:22px;box-shadow:none}
.nav a.join:hover{filter:opacity(.85)}
.nav a.join[aria-current="page"]{outline:3px solid var(--accent);outline-offset:2px;border-radius:999px}
.head-row{display:flex;align-items:center;gap:8px}
@media (max-width:1030px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:8px 20px 20px}
  .nav.open{display:flex}
  .nav a{min-height:54px;font-size:1.1rem;border-radius:12px}
  .nav a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--accent);padding-left:16px;border-radius:0 12px 12px 0}
  .nav a.join{margin:10px 0 0;justify-content:center}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;border-radius:999px;border:2px solid var(--btn);background:var(--btn);color:var(--btn-ink);font:800 1.02rem var(--font-body);text-decoration:none;cursor:pointer}
.btn:hover{color:var(--btn-ink);filter:opacity(.85)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{color:var(--ink);background:var(--surface)}
.btn.sm{min-height:46px;padding:0 20px;font-size:.95rem}
.btn.on-photo{background:#fff;border-color:#fff;color:#0B0B0C}
.btn.on-photo:hover{color:#0B0B0C}
.btn.on-photo.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
.btn.on-photo.ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* photography. The image sits on top of a dark gradient, so a missing file still looks intentional. */
.photo{position:absolute;inset:0;overflow:hidden;background-color:#141d22;background-image:var(--img),linear-gradient(135deg,#22333c 0%,#0b1114 100%);background-size:cover;background-position:center}
.photo .wm{position:absolute;right:-6%;bottom:-8%;width:62%;max-width:420px;color:#fff;opacity:.09;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.photo.has-img .wm{display:none}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.12) 55%,rgba(0,0,0,.05) 100%)}

/* real photos are busier than the placeholder gradient, so keep faces in frame and give the words a stronger dark base */
.banner .photo[data-src$="strength.jpg"]{background-position:center 32%}
.banner .photo[data-src$="flexibility.jpg"]{background-position:center 48%}
.banner .photo[data-src$="nutrition.jpg"]{background-position:center 9%}
.banner .photo[data-src$="stamina.jpg"]{background-position:center 36%}
.pillar .photo[data-src$="strength.jpg"],.pillar .photo[data-src$="nutrition.jpg"],.pillar .photo[data-src$="stamina.jpg"]{background-position:center 0%}
.pillar .photo[data-src$="flexibility.jpg"]{background-position:center 100%}
.pillar .photo::after{background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.8) 34%,rgba(0,0,0,.34) 62%,rgba(0,0,0,.04) 100%)}
.banner .photo::after{background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.68) 50%,rgba(0,0,0,.42) 100%)}
.pillar h3,.pillar p,.pillar .more,.banner h1,.banner .lead,.banner .crumb{text-shadow:0 1px 3px rgba(0,0,0,.55)}

/* home hero slideshow: portrait photos sit on the right at full height and fade into the dark side that holds the headline */
.hero-show .slide{position:absolute;top:0;bottom:0;right:0;aspect-ratio:2/3;background-size:cover;background-position:center top;opacity:0;transition:opacity 1.8s ease;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.hero-show .slide.on{opacity:1}
.hero-ctrl{position:absolute;right:max(16px,calc((100% - var(--wrap))/2 + 20px));bottom:24px;z-index:3;display:flex;align-items:center;gap:10px;color:#fff}
.hero-label{font-weight:800;font-size:.95rem;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.hero-pause{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;cursor:pointer}
.hero-pause svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hero-pause .ic-play{display:none;fill:currentColor}
.hero-pause[aria-pressed="true"] .ic-pause{display:none}
.hero-pause[aria-pressed="true"] .ic-play{display:block}
@media (max-width:760px){
  .hero-show .slide{aspect-ratio:auto;left:0;-webkit-mask-image:none;mask-image:none;background-position:center top}
  .hero .photo.hero-show::after{background:linear-gradient(0deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.82) 45%,rgba(0,0,0,.3) 75%,rgba(0,0,0,.1) 100%)}
  .hero-ctrl{top:84px;bottom:auto}
}
@media (prefers-reduced-motion:reduce){.hero-show .slide{transition:none}}

/* home hero */
.hero{position:relative;color:#fff;min-height:min(88vh,780px);display:flex;align-items:flex-end;isolation:isolate}
.hero .photo::after{background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.42) 55%,rgba(0,0,0,.1) 100%),linear-gradient(0deg,rgba(0,0,0,.55) 0%,transparent 45%)}
.hero .wrap{position:relative;width:100%;padding-block:120px 64px}
.hero h1{max-width:19ch;font-size:clamp(1.95rem,1.02rem + 4.25vw,3.9rem)}
.hero .lead{color:rgba(255,255,255,.88);margin-top:22px;max-width:50ch;font-size:1.2rem}
.hero .btns{margin-top:32px}

/* page banner */
.banner{position:relative;color:#fff;min-height:clamp(300px,42vh,420px);display:flex;align-items:flex-end;isolation:isolate}
.banner .wrap{position:relative;width:100%;padding-block:90px 40px}
.banner .crumb{font-weight:700;margin-bottom:12px;color:rgba(255,255,255,.88)}
.banner h1{max-width:20ch;font-size:clamp(2.1rem,1.2rem + 4vw,3.9rem)}
.banner .lead{color:rgba(255,255,255,.88);margin-top:16px;max-width:58ch}

/* the four pillars */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pillar{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;aspect-ratio:4/5;border-radius:20px;overflow:hidden;padding:22px;color:#fff;text-decoration:none;isolation:isolate}
.pillar:hover{color:#fff}
.pillar:hover .photo{transform:scale(1.04)}
.pillar .photo{transition:transform .5s ease}
.pillar .glyph{width:40px;height:40px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pillar h3{font-size:1.75rem;font-weight:900}
.pillar p{font-size:.98rem;color:rgba(255,255,255,.9)}
.pillar .more{font-weight:800;margin-top:6px;display:inline-flex;align-items:center;gap:8px}
.pillar .more::after{content:"\2192"}
/* quiet element cards: no photos, so the hero carries the photography */
.pillar.plain{--ac:var(--earth);color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-top:6px solid var(--ac);aspect-ratio:auto;min-height:250px;justify-content:flex-start;gap:10px}
.pillar.plain.water{--ac:var(--water)}.pillar.plain.fire{--ac:var(--fire)}.pillar.plain.air{--ac:var(--air)}
.pillar.plain:hover{color:var(--ink);border-color:var(--ac)}
.pillar.plain .glyph{stroke:var(--ac);width:44px;height:44px;margin-bottom:6px}
.pillar.plain p{color:var(--muted)}
.pillar.plain h3,.pillar.plain p,.pillar.plain .more{text-shadow:none}
.pillar.plain .more{margin-top:auto;color:var(--ink)}
@media (max-width:900px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.pillars{grid-template-columns:1fr}.pillar{aspect-ratio:16/11}.pillar.plain{aspect-ratio:auto;min-height:0}}
@media (prefers-reduced-motion:reduce){.pillar .photo{transition:none}.pillar:hover .photo{transform:none}html.themed body::before,html.themed,html.themed *{transition:none!important}}

/* sections */
.section{padding-block:clamp(48px,7vw,96px)}
.section.tint{background:var(--surface)}
.section-head{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}

/* tools list */
.tools{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.tools li{border-bottom:1px solid var(--line)}
.tools a{display:grid;grid-template-columns:48px 1fr auto;gap:20px;align-items:center;padding:26px 4px;text-decoration:none;color:var(--ink)}
.tools a:hover{background:var(--surface);color:var(--ink)}
.tools svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tools h3{font-size:1.5rem;margin-bottom:4px}
.tools p{color:var(--muted)}
.tools .open{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-size:1.3rem}
.tools a:hover .open{background:var(--ink);color:var(--bg)}
@media (max-width:600px){.tools a{grid-template-columns:40px 1fr;gap:14px}.tools .open{display:none}}

/* membership band, always dark so the white text stays readable */
.band{position:relative;color:#fff;isolation:isolate;overflow:hidden}
.band .photo::after{background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.5))}
.band .wrap{position:relative;padding-block:clamp(56px,8vw,104px);display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.band h2{max-width:16ch}
.band p{color:rgba(255,255,255,.88);font-size:1.1rem}

/* content blocks */
.card{background:var(--surface);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:14px}
.notice{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-line);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.notice h3{font-size:1.05rem}
.notice a{color:inherit}
.urgent{border:2px solid var(--b-very);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.list{padding-left:1.2rem;display:flex;flex-direction:column;gap:6px}
.list li{max-width:66ch}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
@media (max-width:820px){.cols3{grid-template-columns:1fr}}
@media (max-width:760px){.cols2{grid-template-columns:1fr}}
.tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:4px 14px;border-radius:999px;border:1.5px solid var(--ink);font:700 .86rem var(--font-body);color:var(--ink)}
.tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}
.tag.weak::before{background:transparent;border:2px solid var(--ink)}
.tag.some::before{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);border:1.5px solid var(--ink)}
.tag.strong::before{background:var(--ink)}
.tag.target::before{background:var(--accent)}

/* accordions */
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
details>summary{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;font:800 1.15rem var(--font-display);letter-spacing:-.01em;list-style:none;padding-block:10px}
details>summary::-webkit-details-marker{display:none}
details>summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font:700 1.2rem var(--font-body)}
details[open]>summary::after{content:"\2212"}
details>.body{padding-block:2px 22px;display:flex;flex-direction:column;gap:12px}
details .sub{color:var(--muted);font:400 .95rem var(--font-body);display:block;letter-spacing:0;margin-top:2px}

/* forms and counters */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700}
input[type=number]{min-height:58px;width:100%;padding:0 16px;border:2px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);font:800 1.4rem var(--font-display);font-variant-numeric:tabular-nums}
input[type=number]:focus{border-color:var(--ink)}
.meter{display:flex;flex-direction:column;gap:10px;padding-block:20px;border-top:1px solid var(--line)}
.meter:first-of-type{border-top:0}
.meter-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.meter-top b{font:800 1.2rem var(--font-display)}
.meter-top span{color:var(--muted)}
.track{height:14px;border-radius:7px;background:var(--bg);overflow:hidden}
.track i{display:block;height:100%;width:0;background:var(--accent);border-radius:7px;transition:width .25s}
.meter-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.step{min-width:54px;min-height:54px;border-radius:50%;border:2px solid var(--ink);background:transparent;color:var(--ink);font:800 1.4rem var(--font-display);cursor:pointer}
.step:hover{background:var(--ink);color:var(--bg)}
.done{font-weight:700;color:var(--ink)}
.err{color:var(--alert);font-weight:700}

/* stretch player */
.player{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.player .big{font:900 clamp(5rem,14vw,8rem)/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:-.04em}
.player .phase{font-weight:700;color:var(--muted)}
.player h3{font-size:1.8rem}
.pbar{height:10px;width:100%;border-radius:5px;background:var(--bg);overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:var(--accent)}

/* membership tiers */
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
@media (max-width:760px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--surface);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:18px}
.tier.plus{background:var(--btn);color:var(--btn-ink)}
.tier.plus a{color:inherit}
.tier.plus .btn{background:var(--btn-ink);border-color:var(--btn-ink);color:var(--btn)}
.tier.plus small{color:inherit;opacity:.8}
.tier .price{font:900 2.4rem/1 var(--font-display);letter-spacing:-.03em}
.tier .price small{font:400 1rem var(--font-body)}

/* plan table */
table.plan{width:100%;border-collapse:collapse;background:var(--surface);border-radius:16px;overflow:hidden}
table.plan th,table.plan td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
table.plan thead th{background:var(--ink);color:var(--bg);font-family:var(--font-display)}
table.plan tbody th{font-weight:800;white-space:nowrap}
table.plan td.num{white-space:nowrap;color:var(--muted)}
@media (max-width:560px){table.plan th,table.plan td{padding:10px 8px;font-size:.95rem}}

/* footer */
.site-foot{background:var(--surface);margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-block:56px 24px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font-size:1rem;margin-bottom:10px}
.foot-grid ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:2px}
.foot-grid li a{display:inline-flex;align-items:center;min-height:40px}
.foot-small{color:var(--muted);font-size:.88rem;padding-bottom:40px;display:flex;flex-direction:column;gap:10px}
.foot-small p{max-width:90ch}
.theme-ctl{display:flex;flex-direction:column;gap:8px}
.seg-ctl{display:inline-flex;flex-wrap:wrap;gap:6px}
.seg-ctl button{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);font:700 .95rem var(--font-body);cursor:pointer}
.seg-ctl button[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}

.sources{color:var(--muted);font-size:.92rem}
.legal h2{margin-top:12px;font-size:1.6rem}
.legal p,.legal li{max-width:70ch}
.legal .stack{gap:12px}
.page-head{padding-block:clamp(48px,7vw,88px) 16px}
.page-head h1{font-size:clamp(2rem,1.2rem + 3.4vw,3.4rem)}
.page-head .lead{margin-top:14px}
main{min-height:60vh}

/* extras */
.pillar>*:not(.photo){position:relative}
.theme-ctl{padding-bottom:32px}
@media (max-width:760px){.theme-ctl{padding-bottom:24px}}
.mark b{white-space:nowrap}
@media (max-width:430px){
  .mark svg{width:38px;height:38px}.mark{gap:9px}.mark b{font-size:1.2rem}
  .icon-btn{width:42px;height:42px}.nav-toggle{padding:0 14px;min-height:42px}.head-row{gap:6px}
  .site-head .wrap{padding-inline:14px}
}