:root{
  --carbon:#101214;--carbon-2:#1A1D20;--cloth:#F2F1EE;--cloth-2:#E8E7E3;
  --mark:#F46D06;--mark-deep:#D85D00;--steel:#6B7178;--gold-2:#C9A96A;
  --line:rgba(16,18,20,.14);--line-inv:rgba(242,241,238,.16);
  --display:"Bricolage Grotesque",sans-serif;--body:"Hanken Grotesk",sans-serif;--mono:"IBM Plex Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--carbon);color:var(--cloth);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--mark);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:none;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mark);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--mark)}
.nav{position:fixed;top:0;left:0;right:0;z-index:120;background:var(--carbon);box-shadow:0 1px 0 var(--line-inv)}
.nav-inner{max-width:none;margin:0 auto;padding:14px clamp(20px,4vw,56px);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;padding:9px 0}
.brand img{height:22px;width:auto;filter:invert(1) brightness(1.1);mix-blend-mode:screen}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a{font-size:14px;font-weight:600;opacity:.85;transition:color .2s,opacity .2s}
.nav-links a:hover{opacity:1;color:var(--mark)}
.nav-cta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--mark);color:#fff;padding:11px 18px;border-radius:3px}
.nav-cta:hover{background:var(--mark-deep)}
.hero{padding:120px 0 44px;background:radial-gradient(1000px 520px at 85% -10%, rgba(244,109,6,.13), transparent 60%),var(--carbon)}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2.3rem,5.4vw,3.8rem);line-height:1.05;letter-spacing:-.02em;max-width:16ch;margin-top:18px}
.hero p{margin-top:20px;max-width:58ch;color:rgba(242,241,238,.78);font-size:clamp(1rem,1.4vw,1.18rem)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:16px 28px;border-radius:3px;border:none;cursor:pointer;transition:transform .2s,background .2s}
.btn-primary{background:var(--mark);color:#fff}
.btn-primary:hover{background:var(--mark-deep);transform:translateY(-2px)}
section.block{padding:44px 0}
section.block h2{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3.8vw,2.6rem);letter-spacing:-.015em;margin-top:12px}
section.block .sub{margin-top:12px;max-width:60ch;color:rgba(242,241,238,.75)}
.line-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:34px}
.line{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--line-inv);background:var(--carbon-2)}
.line img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.line:hover img{transform:scale(1.05)}
.line .cap{
  position:absolute;left:0;right:0;bottom:0;padding:44px 18px 14px;
  background:linear-gradient(0deg,rgba(16,18,20,.92),transparent);
}
.line .cap b{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;display:block}
.line .cap small{display:block;font-size:12.5px;color:rgba(242,241,238,.75);margin-top:4px}
.cap-ctas{display:flex;gap:16px;margin-top:10px;flex-wrap:wrap}
.cap-ctas a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mark);text-decoration:none}
.cap-ctas a:hover{text-decoration:underline}
.promise{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.pr{background:var(--carbon-2);border:1px solid var(--line-inv);border-radius:6px;padding:28px}
.pr h3{font-family:var(--display);font-weight:700;font-size:20px}
.pr p{margin-top:8px;font-size:14.5px;color:rgba(242,241,238,.75)}
.close{padding:80px 0 110px;border-top:1px solid var(--line-inv)}
.close h2{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.015em;max-width:20ch}
.close p{margin-top:14px;max-width:56ch;color:rgba(242,241,238,.75)}
.close .btn{margin-top:28px}
footer{border-top:1px solid var(--line-inv);padding:28px 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--steel)}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
@media (max-width:760px){.nav-links{display:none}.promise{grid-template-columns:1fr}}

/* Find-your-sail wizard */
.wiz{background:rgba(242,241,238,.04);border:1px solid rgba(242,241,238,.12);border-radius:6px;padding:clamp(20px,3vw,34px);margin-top:34px}
.wiz .q{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,241,238,.6);margin:18px 0 10px}
.wiz .q:first-child{margin-top:0}
.wiz .chips{display:flex;gap:10px;flex-wrap:wrap}
.wiz .chip{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
background:none;border:1px solid rgba(242,241,238,.25);border-radius:99px;color:rgba(242,241,238,.85);
padding:9px 16px;cursor:pointer}
.wiz .chip:hover{border-color:var(--mark)}
.wiz .chip.sel{background:var(--mark);border-color:var(--mark);color:#fff}
.wiz .result{margin-top:24px;border-top:1px solid rgba(242,241,238,.12);padding-top:20px;display:none}
.wiz .result.show{display:block}
.wiz .result h3{font-family:var(--display);font-size:20px;margin-bottom:8px}
.wiz .result p{color:rgba(242,241,238,.75);max-width:62ch;margin-bottom:16px}
.wiz .result .btn{margin-right:10px;margin-bottom:10px}
/* Process strip */
.expect{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:30px}
.expect .ex{border:1px solid rgba(242,241,238,.12);border-radius:6px;padding:20px}
.expect .n{font-family:var(--mono);color:var(--mark);font-size:12.5px;letter-spacing:.12em}
.expect h3{font-family:var(--display);font-size:17.5px;margin:9px 0 7px}
.expect p{color:rgba(242,241,238,.7);font-size:14.5px;line-height:1.55}

footer{background:#383838;color:rgba(242,241,238,.7);padding:38px 0 20px;font-size:13.5px;margin-top:60px}
footer .fwrap{max-width:1200px;margin:0 auto;padding:0 24px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:28px;margin-bottom:26px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:6px}
.foot-grid a{color:rgba(242,241,238,.7);text-decoration:none}
.foot-grid a:hover{color:var(--mark)}
.foot-grid h4{color:var(--cloth);font-size:14px;margin-bottom:10px;font-family:var(--body)}
.foot-logo{width:170px;filter:invert(1) brightness(1.1);mix-blend-mode:screen}
.foot-brand p{margin-top:12px;max-width:34ch;font-size:12.5px;color:rgba(242,241,238,.7)}
.foot-bottom{border-top:1px solid rgba(242,241,238,.14);padding-top:14px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

.nav-links .dd{position:relative}
.nav-links .dd>a::after{content:"";display:inline-block;margin-left:7px;width:5px;height:5px;
border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:rotate(45deg) translateY(-2px);vertical-align:middle}
.dd-menu{position:absolute;top:100%;left:-18px;padding-top:14px;display:none;min-width:190px;z-index:60}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:block}
.dd-menu a{display:block;background:#101214;color:#F2F1EE;border:1px solid rgba(242,241,238,.14);
border-top:none;padding:12px 20px;font-size:13.5px;text-decoration:none;letter-spacing:.02em}
.dd-menu a:first-child{border-top:1px solid rgba(242,241,238,.14)}
.dd-menu a:hover{color:var(--mark);background:#16191c}

.nav-links a.nav-sails{color:var(--mark) !important;font-weight:700;letter-spacing:.03em}
.nav-links a.nav-sails:hover{text-decoration:underline;text-underline-offset:5px}

/* mobile go-to-top */
#totop{
  position:fixed;left:16px;bottom:18px;z-index:160;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(242,241,238,.25);background:rgba(16,18,20,.82);color:#F2F1EE;
  font-size:18px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;
}
#totop.show{opacity:1;transform:none}
@media (max-width:900px){#totop{display:flex}}

.stype-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.stype{
  position:relative;min-height:440px;border-radius:8px;overflow:hidden;
  background-size:cover;background-position:center;border:1px solid rgba(242,241,238,.14);
  display:flex;align-items:flex-end;
  transition:transform .25s;
}
.stype:hover{transform:translateY(-4px)}
.st-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,18,20,.1) 30%,rgba(16,18,20,.88) 82%)}
.st-body{position:relative;padding:30px;display:flex;flex-direction:column;gap:12px;width:100%}
.stype h3{font-family:var(--display);font-weight:800;font-size:clamp(28px,3vw,40px);margin:0}
.stype p{color:rgba(242,241,238,.85);font-size:15.5px;line-height:1.55;margin:0;max-width:52ch}
.st-ctas{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.stype .st-cta{padding:13px 22px}
.stype-spin{border-color:var(--mark)}
.st-designer{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mark);text-decoration:none}
.st-designer:hover{text-decoration:underline}
/* whole tile is the click target; the designer link stays independently clickable */
.stype .st-cta::before{content:"";position:absolute;inset:0}
.st-designer{position:relative;z-index:2}
@media (max-width:820px){.stype-grid{grid-template-columns:1fr}.stype{min-height:340px}}