:root{--petrol:#12383A;--ink:#101718;--sand:#B9AA91;--paper:#F5F3ED;--mist:#DDE2DE;
--d:'Outfit','Segoe UI',system-ui,sans-serif;--b:'Public Sans','Segoe UI',system-ui,sans-serif;--w:1160px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{font:400 1.0625rem/1.65 var(--b);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--d);font-weight:300;line-height:1.08;letter-spacing:-.02em}
h2{font-size:clamp(2rem,4.2vw,3.1rem);max-width:18ch}
h3{font-size:1.35rem;font-weight:400;letter-spacing:-.01em}
p{max-width:62ch}
.btn{display:inline-block;font:500 .95rem var(--d);letter-spacing:.02em;padding:.85em 1.5em;border-radius:999px;text-decoration:none;border:1.5px solid var(--sand);background:var(--sand);color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:transparent;color:var(--sand)}
.btn.ghost{background:transparent;color:var(--paper);border-color:rgba(245,243,237,.4)}
.btn.ghost:hover{border-color:var(--sand);color:var(--sand)}
.btn.dark{background:var(--petrol);border-color:var(--petrol);color:var(--paper)}
.btn.dark:hover{background:transparent;color:var(--petrol)}

/* header */
header{position:sticky;top:0;z-index:20;background:rgba(245,243,237,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--mist)}
.bar{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.bar img{height:34px;width:auto}
nav{display:flex;gap:28px;align-items:center}
nav a{font:400 .95rem var(--d);text-decoration:none;color:var(--petrol)}
nav a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--sand);text-underline-offset:6px}
nav .btn{padding:.6em 1.2em;color:var(--ink)}
nav .btn:hover{color:var(--petrol);border-color:var(--petrol)}
#mb{display:none;background:none;border:1.5px solid var(--petrol);color:var(--petrol);border-radius:999px;font:500 .9rem var(--d);padding:.45em 1em}

/* hero */
.hero{background:var(--petrol);color:var(--paper);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding-top:92px;padding-bottom:84px}
.hero h1{font-size:clamp(2.5rem,6vw,4.9rem);font-weight:200}
.hero h1 em{font-style:normal;color:var(--sand)}
.hero p{margin:26px 0 34px;color:var(--mist);font-size:1.15rem}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.loop{width:100%;height:auto}
.loop path{fill:none;stroke:var(--sand);stroke-width:22;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s .3s cubic-bezier(.6,.05,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.facts{background:var(--ink);color:var(--mist);font:300 .95rem var(--d)}
.facts .wrap{display:flex;gap:12px 40px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.facts b{font-weight:500;color:var(--sand)}

/* sections */
section{padding:104px 0}
.head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.head p{color:#3a4648}

/* brand ledger */
.brands{background:var(--mist)}
.cat{display:grid;grid-template-columns:260px 1fr;gap:32px;padding:34px 0;border-top:1.5px solid var(--petrol)}
.cat h3{color:var(--petrol)}
.cat small{display:block;margin-top:8px;color:#4d5a5c;font-size:.9rem;line-height:1.5}
.cat ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.cat li{display:flex;flex-direction:column;padding:14px 0;border-bottom:1px solid rgba(18,56,58,.18)}
.cat li strong{font:400 1.45rem var(--d);letter-spacing:-.01em;color:var(--ink)}
.cat li span{font-size:.92rem;color:#4d5a5c}
.note{margin-top:28px;font-size:.95rem;color:#3a4648}

/* audiences */
dl{border-top:1.5px solid var(--petrol)}
.row{display:grid;grid-template-columns:300px 1fr;gap:32px;padding:30px 0;border-bottom:1px solid var(--mist)}
.row dt{font:300 1.7rem var(--d);color:var(--petrol)}
.row dd{max-width:60ch}

/* process */
.proc{background:var(--petrol);color:var(--paper)}
.proc h2{margin-bottom:64px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s;position:relative}
.steps:before{content:"";position:absolute;left:0;right:0;top:15px;border-top:1.5px solid var(--sand);opacity:.6}
.steps li{position:relative;padding-top:52px;counter-increment:s}
.steps li:before{content:counter(s);position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;background:var(--sand);color:var(--ink);font:500 .95rem/32px var(--d);text-align:center}
.steps h3{margin-bottom:8px}
.steps p{color:var(--mist);font-size:.98rem}

/* about */
.about .wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:64px;align-items:center}
.about img{width:100%;max-width:340px;border-radius:50%}
.about p+p{margin-top:16px}

/* contact */
.contact{background:var(--mist)}
.contact .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:64px}
form{display:grid;gap:18px}
label{display:grid;gap:6px;font:400 .9rem var(--d);color:var(--petrol)}
input,select,textarea{font:400 1rem var(--b);padding:.8em 1em;border:1.5px solid rgba(18,56,58,.3);border-radius:10px;background:var(--paper);color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--petrol);outline:none;box-shadow:0 0 0 3px rgba(185,170,145,.5)}
textarea{min-height:130px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hp{position:absolute;left:-9999px}
#msg{display:none;padding:14px 18px;border-radius:10px;background:var(--petrol);color:var(--paper)}
#msg.show{display:block}
address{font-style:normal}
address p{margin-bottom:22px}
address b{display:block;font:500 .85rem var(--d);color:var(--petrol);margin-bottom:2px}

/* footer */
footer{background:var(--ink);color:var(--mist);padding:64px 0 36px;font-size:.95rem}
footer .wrap{display:grid;grid-template-columns:1fr auto auto;gap:40px 96px;align-items:start}
footer .wrap>div:first-child p{max-width:36ch}
footer img{height:38px;width:auto;margin-bottom:16px}
footer a{display:block;text-decoration:none;padding:0;margin-bottom:6px;line-height:1.65}
footer a:hover{color:var(--sand)}
footer h4{font:500 .95rem/38px var(--d);height:38px;color:var(--sand);margin-bottom:16px}
.legal{margin-top:44px;padding-top:22px;border-top:1px solid rgba(221,226,222,.18);font-size:.82rem;color:#9aa7a5}

@media(max-width:900px){
section{padding:72px 0}
.hero .wrap,.head,.about .wrap,.contact .wrap,footer .wrap{grid-template-columns:1fr}
.hero .wrap{padding-top:56px;padding-bottom:56px}
.loop{max-width:360px}
.cat,.row{grid-template-columns:1fr;gap:12px}
.cat ul{grid-template-columns:1fr}
.steps{grid-template-columns:1fr 1fr;row-gap:40px}
.steps:before{display:none}
.about img{max-width:200px}
#mb{display:block}
nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);padding:12px 24px 20px;border-bottom:1px solid var(--mist)}
nav.open{display:flex}
nav a{padding:10px 0}
}
@media(max-width:560px){.two{grid-template-columns:1fr}.steps{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.loop path{animation:none;stroke-dashoffset:0}html{scroll-behavior:auto}}

/* brand slider, brand page, dialog */
.slide{position:relative}
.track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;scrollbar-width:thin;scrollbar-color:var(--petrol) transparent}
.tile{flex:0 0 270px;scroll-snap-align:start;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;padding:22px;background:var(--paper);color:var(--ink);border:1.5px solid var(--petrol);border-radius:14px;cursor:pointer;font:inherit;transition:background .2s,color .2s}
.tile span{font:300 1.7rem/1.15 var(--d);letter-spacing:-.01em}
.tile small{font-size:.88rem;color:#4d5a5c}
.tile:hover{background:var(--petrol);color:var(--paper)}.tile:hover small{color:var(--sand)}
.arrows{display:flex;gap:10px;margin-top:6px;align-items:center}
.arrows button{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--petrol);background:transparent;color:var(--petrol);font-size:1.3rem;cursor:pointer}
.arrows button:hover{background:var(--petrol);color:var(--paper)}
.arrows a{margin-left:auto;font:500 .95rem var(--d);color:var(--petrol);text-underline-offset:6px;text-decoration-color:var(--sand)}
.page{padding:72px 0 104px}
.page h1{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:16px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:32px 0}
.filters button{font:400 .92rem var(--d);padding:.5em 1.1em;border-radius:999px;border:1.5px solid var(--petrol);background:transparent;color:var(--petrol);cursor:pointer}
.filters button[aria-pressed=true]{background:var(--petrol);color:var(--paper)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.grid .tile{flex:none}
dialog{border:0;border-radius:18px;padding:40px;max-width:560px;width:calc(100% - 32px);background:var(--paper);color:var(--ink);box-shadow:0 30px 80px rgba(16,23,24,.35)}
dialog::backdrop{background:rgba(16,23,24,.65)}
dialog .x{position:absolute;top:14px;right:18px;background:none;border:0;font-size:2rem;line-height:1;color:var(--petrol);cursor:pointer}
dialog .k{font:400 .9rem var(--d);color:#5d6a60;margin-bottom:6px}
dialog h3{font-size:2.2rem;margin-bottom:14px;color:var(--petrol)}
dialog h4{font:500 .95rem var(--d);margin:24px 0 10px;color:var(--petrol)}
dialog ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
dialog li{padding:.35em .9em;border-radius:999px;background:var(--mist);font-size:.92rem}
dialog .s{margin:24px 0 20px;font-size:.92rem;color:#4d5a5c}
@media(max-width:900px){.tile{flex-basis:78%}.arrows a{font-size:.9rem}}

/* inner pages and forms */
.phero{background:var(--petrol);color:var(--paper);padding:88px 0 72px}
.phero h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:200;max-width:20ch}
.phero p{margin-top:22px;color:var(--mist);font-size:1.15rem}
.ben{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.ben>div{border-top:1.5px solid var(--petrol);padding:26px 0 34px}
.ben h3{color:var(--petrol);margin-bottom:8px}
.contact .wrap.one{grid-template-columns:1.3fr .7fr}
.row dd a{display:inline-block;margin-left:8px;color:var(--petrol);text-underline-offset:5px;text-decoration-color:var(--sand)}
.pick .row{padding:20px 0;grid-template-columns:240px 1fr}
.pick dt a{text-decoration:none;font:300 1.5rem var(--d);color:var(--petrol)}
.pick dt a:hover{text-decoration:underline;text-decoration-color:var(--sand);text-underline-offset:6px}
.contact dl{border-top-color:var(--petrol)}.contact .row{border-bottom-color:rgba(18,56,58,.2)}
fieldset{border:0;display:grid;gap:8px}
legend{font:400 .9rem var(--d);color:var(--petrol);margin-bottom:8px}
.cks{display:flex;flex-wrap:wrap;gap:8px 18px}
label.ck{display:flex;flex-direction:row;align-items:center;gap:8px;font:400 .95rem var(--b);color:var(--ink)}
label.ck input{width:auto}
dialog .alt{display:inline-block;margin-left:14px;color:var(--petrol);font-size:.92rem}
@media(max-width:900px){.ben,.contact .wrap.one{grid-template-columns:1fr}.pick .row{grid-template-columns:1fr}.phero{padding:56px 0 48px}}
.arrows .pp{width:auto;border-radius:999px;padding:0 18px;font:400 .9rem var(--d)}

/* alignment fixes */
.tile.more{text-decoration:none;border-style:dashed;background:transparent}
.tile.more small{max-width:22ch}
.facts .wrap{justify-content:center;text-align:center;gap:10px 48px}
#export .head{grid-template-columns:1fr;text-align:center;justify-items:center;margin-bottom:40px}
#export h2{max-width:none}
#export .ben{grid-template-columns:repeat(4,1fr);gap:0 32px;text-align:center}
#export .ben p{margin:0 auto}
.contact .wrap{grid-template-areas:"h ." "b a";align-items:start;gap:0 64px}
.contact .ch{grid-area:h}.contact .cb{grid-area:b}.contact address{grid-area:a}
.contact address.pa{padding-top:20px;border-top:1.5px solid var(--petrol)}
@media(max-width:1000px){#export .ben{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.contact .wrap,.contact .wrap.one{grid-template-areas:"h" "b" "a";gap:0}.contact address{margin-top:36px}}
@media(max-width:560px){#export .ben{grid-template-columns:1fr}}


/* Layout refinement: consistent page height, responsive navigation and full-width footer legal line */
html, body { min-height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
body > footer { flex-shrink: 0; }
footer .wrap:last-child { display: block; }
footer .legal { width: 100%; max-width: none; margin-top: 44px; }
footer .wrap:first-child { grid-template-columns: minmax(0, 1.3fr) minmax(140px, .7fr) minmax(170px, .8fr); gap: 36px clamp(24px, 5vw, 72px); }
footer .wrap:first-child > div { min-width: 0; }
footer .wrap:first-child > div:first-child p { max-width: 38ch; }
footer h4 { margin-bottom: 12px; }
footer a { overflow-wrap: anywhere; }

@media (min-width: 901px) and (max-width: 1120px) {
  .wrap { padding-left: 28px; padding-right: 28px; }
  nav { gap: 16px; }
  nav a { font-size: .88rem; }
  nav .btn { padding: .55em .9em; }
}
@media (max-width: 900px) {
  footer .wrap:first-child { grid-template-columns: 1fr 1fr; gap: 30px 36px; }
  footer .wrap:first-child > div:first-child { grid-column: 1 / -1; }
  footer .wrap:last-child { display: block; }
  footer .legal { margin-top: 30px; }
}
@media (max-width: 560px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .bar { gap: 12px; }
  .bar img { max-width: 145px; height: auto; }
  .hero .wrap { gap: 28px; }
  .hero .cta .btn { text-align: center; }
  footer { padding: 44px 0 28px; }
  footer .wrap:first-child { grid-template-columns: 1fr; gap: 24px; }
  footer .wrap:first-child > div:first-child { grid-column: auto; }
  footer h4 { height: auto; line-height: 1.4; margin-bottom: 10px; }
  footer .legal { font-size: .78rem; line-height: 1.6; }
}