/* Bearient — static design build. Tokens first; WordPress theme will reuse them. */
:root{
  --navy:#13223F;
  --navy-2:#1C2F52;
  --navy-ink:#0B1528;
  --ground:#F5F7FA;
  --paper:#FFFFFF;
  --line:#D9DFE8;
  --muted:#4F5D75;          /* 6.6:1 on ground */
  --muted-on-navy:#B9C4D8;  /* 8.6:1 on navy */
  --gold:#E3B23C;
  --gold-deep:#B8871E;
  --gold-ink:#7A5610;       /* gold-family text on light, 6.4:1 */
  --serif:"Source Serif 4", Georgia, serif;
  --sans:"Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --wrap:1200px;
  --gutter:clamp(16px,4vw,48px);
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:40px; --space-5:64px; --space-6:104px; --space-7:144px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--navy) var(--ground)}
body{margin:0;background:var(--ground);color:var(--navy-ink);font:400 1.125rem/1.6 var(--sans);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold);color:var(--navy-ink)}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration-color:var(--gold-deep);text-underline-offset:.22em;text-decoration-thickness:1.5px}
a:hover{text-decoration-color:var(--navy)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--navy);letter-spacing:-.012em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.75rem,6.2vw,5.5rem);line-height:1.02}
h2{font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.08}
h3{font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.3}
p{margin:0;text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--gold);color:var(--navy-ink);padding:10px 16px;z-index:100;font-weight:600}
.skip:focus{left:16px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;font:600 1.0625rem/1 var(--sans);padding:1.05em 1.5em;border-radius:3px;text-decoration:none;border:2px solid transparent;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.btn svg{width:1.1em;height:1.1em;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-2)}
.btn-gold{background:var(--gold);color:var(--navy-ink)}
.btn-gold:hover{background:#EDC25C}
.btn-ghost{border-color:currentColor;color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.textlink{font-weight:600;display:inline-flex;align-items:center;gap:.45em}
.textlink svg{width:1em;height:1em;transition:transform .3s var(--ease)}
.textlink:hover svg{transform:translateX(3px)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(245,247,250,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.scrolled{border-bottom-color:var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand img{height:34px;width:auto}
.nav-list{display:flex;gap:clamp(20px,2.6vw,40px);list-style:none;margin:0;padding:0;align-items:center}
.nav-list a{font:500 1rem var(--sans);text-decoration:none;color:var(--navy);padding:8px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.nav-list a:hover,.nav-list a[aria-current="page"]{border-bottom-color:var(--gold)}
.nav-list .nav-cta a{background:var(--navy);color:#fff;padding:12px 18px;border-radius:3px;border:0}
.nav-list .nav-cta a:hover{background:var(--navy-2)}
.nav-toggle{display:none;background:none;border:0;padding:10px;margin-right:-10px;color:var(--navy);cursor:pointer}
.nav-toggle svg{width:28px;height:28px}
@media (max-width:900px){
  .nav-toggle{display:block}
  .site-nav{position:fixed;inset:84px 0 auto 0;background:var(--ground);border-bottom:1px solid var(--line);padding:8px var(--gutter) 28px;display:none}
  .site-nav.open{display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list li{border-top:1px solid var(--line)}
  .nav-list a{display:block;padding:18px 0;font-size:1.125rem;border:0}
  .nav-list .nav-cta{border:0;margin-top:16px}
  .nav-list .nav-cta a{text-align:center;padding:18px}
}

/* Hero */
.hero{position:relative;overflow:hidden;padding:clamp(56px,9vw,120px) 0 clamp(88px,12vw,168px)}
.hero .wrap{position:relative;z-index:2}
.hero-copy{max-width:640px}
.hero h1{margin-bottom:var(--space-3)}
.hero h1 .soft{color:#41557A}
.hero .lede{font-size:clamp(1.1875rem,1.6vw,1.375rem);line-height:1.55;color:#2C3B57;max-width:34em;margin-bottom:var(--space-4)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4)}
.page-hero{padding:clamp(56px,8vw,112px) 0 clamp(48px,6vw,80px);position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(2.5rem,5vw,4.25rem);max-width:15em;margin-bottom:var(--space-3)}
.page-hero .lede{font-size:clamp(1.1875rem,1.5vw,1.3125rem);color:#2C3B57;max-width:38em}
@media (max-width:900px){
  .hero-copy{max-width:none}
}

/* Section rhythm */
.section{padding:clamp(72px,10vw,var(--space-7)) 0}
.section-head{max-width:760px;margin-bottom:var(--space-5)}
.section-head h2{margin-bottom:var(--space-3)}
.section-head p{color:#2C3B57;font-size:1.1875rem}
.prose p+p{margin-top:1.1em}
.prose{max-width:38em}

/* Challenge */
.challenge-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,7vw,112px);align-items:start}
.challenge-grid h2{margin-bottom:var(--space-4)}
.decision-areas{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.decision-areas li{font:500 .9375rem var(--sans);color:var(--muted);border:1px solid var(--line);background:var(--paper);padding:8px 14px;border-radius:999px}
.conclusion{font-family:var(--serif);font-size:clamp(1.375rem,2vw,1.625rem);line-height:1.35;color:var(--navy);margin-top:var(--space-4)}
.name-note{background:var(--paper);border-top:3px solid var(--gold);padding:var(--space-4);box-shadow:0 18px 40px -24px rgba(19,34,63,.35)}
.name-note h3{margin-bottom:var(--space-2)}
.name-note .line{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--navy);margin-bottom:var(--space-2)}
.name-note p{color:#2C3B57;font-size:1.0625rem}
.name-note .textlink{margin-top:var(--space-3)}
@media (max-width:900px){.challenge-grid{grid-template-columns:1fr}}

/* Navy band + quotes */
.band{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.band h2,.band h3{color:#fff}
.band p{color:var(--muted-on-navy)}
.quote-band{padding:clamp(72px,9vw,128px) 0}
.quote-band blockquote{margin:0;max-width:22em;font:400 clamp(1.75rem,3.2vw,2.75rem)/1.3 var(--serif);color:#fff;letter-spacing:-.01em;text-wrap:balance}
.quote-band blockquote::before{content:"";display:block;width:64px;height:6px;background:var(--gold);margin-bottom:var(--space-4);border-radius:3px}
.quote-band cite{display:block;margin-top:var(--space-4);font:600 1.0625rem var(--sans);font-style:normal;color:#fff}
.quote-band cite span{display:block;font-weight:400;color:var(--muted-on-navy)}

/* Opportunity areas */
.areas{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,112px);align-items:start}
.area-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.area-list li{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line);align-items:baseline}
.area-list h3{font-size:1.375rem}
.area-list p{color:#2C3B57;font-size:1.0625rem}
@media (max-width:900px){.areas{grid-template-columns:1fr}}
@media (max-width:560px){.area-list li{grid-template-columns:1fr;gap:6px}}

/* Journey (signature) */
.journey{position:relative;background:var(--paper);border-block:1px solid var(--line)}
.journey .section-head{margin-inline:auto;text-align:center}
.journey-track{position:relative;list-style:none;margin:0 auto;padding:0;max-width:1040px}
.journey-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.journey-track::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:10px;margin-left:-5px;background:var(--gold);border-radius:5px}
.reveal .journey-track::before{display:none}
.step{position:relative;display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;min-height:200px}
.step-body{max-width:380px}
.step:nth-of-type(odd) .step-body{grid-column:1;justify-self:end;text-align:right}
.step:nth-of-type(even) .step-body{grid-column:3;justify-self:start}
.step-node{grid-column:2;grid-row:1;justify-self:center;width:58px;height:58px;border-radius:50%;background:var(--paper);border:3px solid var(--navy);display:grid;place-items:center;font:700 1.25rem var(--serif);color:var(--navy);position:relative;z-index:2;transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease)}
.step.reached .step-node{background:var(--gold);border-color:var(--gold-deep);transform:scale(1.06)}
.step h3{font-size:clamp(1.625rem,2.4vw,2rem);margin-bottom:6px}
.step .what{font-weight:600;color:var(--navy);margin-bottom:6px}
.step p{color:#2C3B57;font-size:1.0625rem}
.journey-loop{margin:var(--space-5) auto 0;text-align:center;max-width:34em;font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--muted)}
@media (max-width:760px){
  .journey .section-head{text-align:left}
  .journey-track::before{left:29px}
  .step{grid-template-columns:58px 1fr;gap:20px;min-height:0;padding:0 0 var(--space-5);align-items:start}
  .step:nth-of-type(n) .step-body{grid-column:2;justify-self:start;text-align:left}
  .step-node{grid-column:1}
  .journey-loop{text-align:left;margin-left:78px}
}

/* Testimonials */
.voices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,96px)}
.voice blockquote{margin:0;font:400 clamp(1.5rem,2.3vw,2rem)/1.3 var(--serif);color:var(--navy);text-wrap:balance}
.voice figcaption{margin-top:var(--space-3);font-weight:600;color:var(--navy)}
.voice figcaption span{display:block;font-weight:400;color:var(--muted)}
.voice{margin:0;padding-top:var(--space-3);border-top:3px solid var(--gold)}
@media (max-width:760px){.voices{grid-template-columns:1fr}}

/* Principles */
.principles{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,112px)}
.principle-list{margin:0;padding:0}
.principle-list div{padding:var(--space-3) 0;border-bottom:1px solid rgba(185,196,216,.25)}
.principle-list div:first-child{border-top:1px solid rgba(185,196,216,.25)}
.principle-list dt{font:600 1.375rem var(--serif);color:#fff;margin-bottom:6px}
.principle-list dd{margin:0;color:var(--muted-on-navy)}
.copeace-note{margin-top:var(--space-4);font-size:1rem;color:var(--muted-on-navy);max-width:30em}
.band .section-head p{color:var(--muted-on-navy)}
@media (max-width:900px){.principles{grid-template-columns:1fr}}

/* Team */
.team-strip{display:flex;flex-wrap:wrap;gap:14px;margin:var(--space-4) 0}
.team-strip img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid var(--paper);box-shadow:0 6px 16px -8px rgba(19,34,63,.5)}
.team-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-4);align-items:end}
@media (max-width:760px){.team-intro{grid-template-columns:1fr}.team-strip img{width:64px;height:64px}}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--space-5) var(--space-4);list-style:none;margin:0;padding:0}
.person img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;background:#E6EAF0;margin-bottom:var(--space-2);filter:saturate(.92)}
.person h3{font-size:1.375rem}
.person .title{font-weight:600;color:var(--navy);margin-top:2px}
.person .focus{color:var(--muted);font-size:1rem;margin-top:8px;padding-top:8px;border-top:2px solid var(--gold);display:inline-block}
.group-title{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-4)}
.group-title::after{content:"";flex:1;height:1px;background:var(--line)}
.group+.group{margin-top:var(--space-6)}

/* Close CTA */
.close{padding:clamp(80px,11vw,152px) 0}
.close .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--space-5);align-items:end}
.close h2{color:#fff;font-size:clamp(2.25rem,4.2vw,3.75rem);margin-bottom:var(--space-3)}
.close p{max-width:32em;font-size:1.1875rem}
.close .actions{justify-self:end}
@media (max-width:900px){.close .wrap{grid-template-columns:1fr}.close .actions{justify-self:start}}

/* How we work detail */
.detail-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.detail-step{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);gap:var(--space-4);padding:var(--space-5) 0;border-top:1px solid var(--line);position:relative}
.detail-step .num{font:600 4rem/1 var(--serif);color:var(--gold-deep)}
.detail-step h3{font-size:clamp(1.75rem,2.6vw,2.25rem);margin-bottom:8px}
.detail-step .what{font-weight:600;color:var(--navy)}
.detail-step ul{margin:0;padding-left:1.1em;color:#2C3B57}
.detail-step li+li{margin-top:6px}
.detail-step li::marker{color:var(--gold-deep)}
.detail-step .label{font-weight:600;color:var(--muted);font-size:.9375rem;margin-bottom:8px}
@media (max-width:860px){.detail-step{grid-template-columns:1fr;gap:var(--space-2)}.detail-step .num{font-size:2.75rem}}
.signoff{font:400 clamp(1.5rem,2.6vw,2.25rem)/1.3 var(--serif);color:#fff;max-width:22em}
.signoff strong{color:var(--gold);font-weight:600}
.name-story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,7vw,112px);align-items:start}
.name-story .mark{width:min(260px,60vw)}
@media (max-width:860px){.name-story{grid-template-columns:1fr}}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,7vw,112px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.form{background:var(--paper);padding:clamp(24px,4vw,48px);box-shadow:0 24px 60px -36px rgba(19,34,63,.45);border-top:4px solid var(--gold)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.field{margin-bottom:var(--space-3)}
.field label{display:block;font-weight:600;font-size:1rem;color:var(--navy);margin-bottom:6px}
.field label .opt{font-weight:400;color:var(--muted)}
.field input,.field textarea{width:100%;font:400 1.0625rem var(--sans);color:var(--navy-ink);background:var(--ground);border:1.5px solid #B7C1D0;border-radius:3px;padding:14px 14px;caret-color:var(--gold-deep);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:150px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#64728A}
.field input:hover,.field textarea:hover{border-color:var(--muted)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(227,178,60,.55)}
.field .err{display:none;color:#A3271C;font-size:.9375rem;margin-top:6px}
.field.invalid input{border-color:#A3271C}
.field.invalid .err{display:block}
.form .note{font-size:.9375rem;color:var(--muted);margin-top:var(--space-2)}
.form-success{display:none}
.form.sent .form-fields{display:none}
.form.sent .form-success{display:block}
.form-success h2{font-size:2rem;margin-bottom:var(--space-2)}
.expect{margin:0;padding:0;list-style:none}
.expect li{padding:var(--space-3) 0 var(--space-3) 44px;border-bottom:1px solid var(--line);position:relative}
.expect li::before{content:"";position:absolute;left:0;top:calc(var(--space-3) + 6px);width:22px;height:22px;border-radius:50%;border:3px solid var(--gold-deep);background:var(--paper)}
.expect strong{display:block;color:var(--navy);font-size:1.125rem}
.expect span{color:#2C3B57}

/* Footer */
.site-footer{background:var(--navy-ink);color:var(--muted-on-navy);padding:var(--space-5) 0 var(--space-4);font-size:1rem}
.site-footer a{color:#fff;text-decoration-color:rgba(227,178,60,.6)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:var(--space-4);align-items:start;padding-bottom:var(--space-4);border-bottom:1px solid rgba(185,196,216,.2)}
.foot-top img.logo{height:32px;width:auto;margin-bottom:var(--space-2)}
.foot-nav{display:flex;flex-wrap:wrap;gap:12px 32px;list-style:none;margin:0;padding:0}
.foot-nav a{text-decoration:none;font-weight:500}
.foot-nav a:hover{text-decoration:underline}
.copeace{display:flex;align-items:center;gap:12px;margin-top:var(--space-3)}
.copeace img{height:28px;width:auto;background:#fff;padding:5px 8px;border-radius:3px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:var(--space-3);font-size:.9375rem}
.foot-bottom ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
@media (max-width:760px){.foot-top{grid-template-columns:1fr}}

/* Reveal: visible by default; JS adds subtle rise only when allowed */
@media (prefers-reduced-motion:no-preference){
  .reveal .rise{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .reveal .rise.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}

/* Photos */
.photo{margin:0}
.photo img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px;box-shadow:0 30px 60px -40px rgba(19,34,63,.55)}
.challenge-grid .name-note{margin:-56px var(--space-3) 0 var(--space-4);position:relative}
@media (max-width:560px){.challenge-grid .name-note{margin:-40px 12px 0}}
.hww-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,96px);align-items:center}
.photo-tall img{aspect-ratio:4/5}
@media (max-width:900px){.hww-hero{grid-template-columns:1fr}.photo-tall img{aspect-ratio:3/2}}

.detail-step .num{position:relative;z-index:1;display:inline-grid;place-items:center;width:44px;height:44px;margin-left:-4px;border-radius:50%;background:var(--paper);border:3px solid var(--navy);font-size:1.375rem;color:var(--navy)}
.name-story .mark{width:min(200px,50vw)}
.copeace img{height:38px}

@media (max-width:560px){
  .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-2)}
  .person h3{font-size:1.125rem}
  .person .title{font-size:.9375rem}
  .person .focus{font-size:.875rem}
}

/* ---------- Ribbon layer (one continuous silk ribbon, drawn by ribbon.js) ---------- */
main{position:relative}
.ribbon-layer{position:absolute;left:0;top:0;width:100%;z-index:1;pointer-events:none;overflow:visible}
main .wrap{position:relative;z-index:2}
.has-ribbon .journey-track::before{display:none}

/* Journey stations: small rings on the ribbon; numbers live with the words */
.step-node{width:26px;height:26px;border-width:3px;font-size:0}
.step.reached .step-node{transform:none}
.step h3 .n{font:600 .95em var(--serif);color:var(--gold-ink);margin-right:.4em}
.journey-loop{max-width:none;width:calc(50% - 60px);margin:var(--space-4) 0 0;text-align:right}
@media (max-width:760px){
  .step{grid-template-columns:44px 1fr}
  .step-node{grid-column:1;justify-self:center;margin-top:6px}
  .journey-loop{width:auto;margin-left:64px;text-align:left}
}

/* How-we-work rings sit on the ribbon */
.detail-step .num{width:30px;height:30px;font-size:0;border-width:3px;margin:12px 0 0;transition:background .5s var(--ease),border-color .5s var(--ease)}
.detail-step.reached .num{background:var(--gold);border-color:var(--gold-deep)}
.detail-step{grid-template-columns:60px minmax(0,1fr) minmax(0,1fr)}
.detail-step h3 .n{color:var(--gold-ink);margin-right:.4em}
@media (max-width:860px){
  .detail-step{grid-template-columns:30px minmax(0,1fr);column-gap:var(--space-3)}
  .detail-step .num{grid-row:1 / span 2}
  .detail-step > div:nth-child(3){grid-column:2}
}

/* Name note: text on the ground, not a card */
.name-note{background:none;border:0;box-shadow:none;padding:var(--space-4) 0 0 40px;position:relative}
.name-note::before{content:"";position:absolute;left:0;top:calc(var(--space-4) + 6px);width:22px;height:22px;border-radius:50%;border:3px solid var(--navy);background:var(--gold)}
.challenge-grid .name-note{margin:0}
.name-story .mark{mix-blend-mode:multiply}
/* stations: white ring before, navy disc with gold rim once the ribbon reaches it */
.step-node,.detail-step .num{width:30px;height:30px;background:var(--paper);border:3px solid var(--navy);box-shadow:0 0 0 3px var(--paper)}
.step.reached .step-node,.detail-step.reached .num{background:var(--navy);border-color:var(--gold);box-shadow:0 0 0 3px var(--navy)}
@media (min-width:761px){.step{grid-template-columns:1fr 168px 1fr}}

/* fix round: mobile ribbon lane, flat form field */
@media (max-width:760px){ main .wrap{padding-left:32px} }
.form{box-shadow:none;border:1px solid var(--line);border-top:4px solid var(--gold)}