/* SandSpace home page: quiet, editorial, premium. Hairlines, generous space, one serif accent. */
.hp{--ink:#171613;--mute:#6b665d;--hair:rgba(23,22,19,.14);--serif:'Fraunces','DM Serif Display',Georgia,serif;color:var(--ink)}
.hp-w{white-space:nowrap}
.hp em{font:italic 400 1em/1 var(--serif);letter-spacing:-.03em;color:#6b665d}

/* 1. hero */
.hp-hero{min-height:calc(100svh - 72px);display:flex;flex-direction:column;justify-content:center;gap:clamp(44px,7vw,92px);padding:clamp(24px,4vw,48px) 0 clamp(72px,9vw,120px)}
.hp-glimpse{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(10px,1.2vw,16px);padding:0 var(--pad)}
.hp-tile{width:clamp(112px,11vw,150px);aspect-ratio:1/1.05;padding:14px 15px;border:1px solid var(--hair);border-radius:18px;background:rgba(255,255,255,.55);display:flex;flex-direction:column;justify-content:space-between;color:var(--ink)}
.hp-tile span{font:500 10.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.hp-tile svg{width:44%;align-self:flex-end;opacity:.9}
.hp-say{text-align:center}
.hp-big{max-width:12em;margin:0 auto;font:600 clamp(44px,8vw,128px)/.98 var(--sans);letter-spacing:-.055em;text-wrap:balance}
.hp-act{display:grid;justify-items:center;gap:18px;margin-top:clamp(32px,4.5vw,56px)}
.btn.hp-go{min-height:60px;padding:0 48px;font-size:16.5px;font-weight:600;letter-spacing:-.005em}
.hp-act p{font:500 13.5px var(--sans);color:var(--mute)}

/* shared type */
.hp-kick{font:500 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.hp-h2{font:600 clamp(32px,4.6vw,68px)/1.02 var(--sans);letter-spacing:-.05em;max-width:15em;text-wrap:balance}
.hp-lede{font:400 clamp(17px,1.4vw,20px)/1.65 var(--sans);color:var(--mute);max-width:32em}

/* 2. why */
.hp-why{padding-top:clamp(72px,10vw,150px);padding-bottom:clamp(72px,10vw,150px);border-top:1px solid var(--hair)}
.hp-why-b{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,6vw,100px);align-items:end;margin-top:clamp(28px,4vw,52px)}

/* 3. think / create / become */
.hp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair);padding-bottom:0}
.hp-step{padding:clamp(28px,4vw,56px) clamp(18px,3vw,44px) clamp(40px,6vw,88px) 0}
.hp-step+.hp-step{padding-left:clamp(18px,3vw,44px);border-left:1px solid var(--hair)}
.hp-n{display:block;font:500 12px var(--sans);letter-spacing:.14em;color:var(--mute);margin-bottom:clamp(36px,6vw,96px)}
.hp-step h3{font:600 clamp(32px,3.8vw,56px)/1 var(--sans);letter-spacing:-.05em;margin-bottom:16px}
.hp-step p{font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:var(--mute);max-width:21em}

/* 4. the workspace */
.hp-kit{background:#fff;padding:clamp(72px,10vw,150px) 0;margin-top:clamp(40px,6vw,88px)}
.hp-kit-h{display:grid;gap:18px}
.hp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(36px,5vw,72px);border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.hp-grid li{padding:clamp(24px,2.6vw,40px);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);min-height:clamp(230px,20vw,300px);display:grid;align-content:start;gap:12px}
.hp-grid svg{width:40px;height:40px;margin-bottom:clamp(20px,3vw,44px);color:var(--ink)}
.hp-grid h3{font:600 clamp(19px,1.5vw,23px)/1.15 var(--sans);letter-spacing:-.025em}
.hp-grid p{font-size:15px;line-height:1.55;color:var(--mute);max-width:24em}

/* 5. what we stand for */
.hp-stand{padding-top:clamp(72px,10vw,150px);padding-bottom:clamp(72px,10vw,150px)}
.hp-beliefs{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--hair)}
.hp-beliefs li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(16px,4vw,64px);align-items:baseline;padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--hair)}
.hp-beliefs strong{font:600 clamp(26px,3.6vw,52px)/1.02 var(--sans);letter-spacing:-.05em}
.hp-beliefs span{font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--mute)}


/* reveal: a quiet fade */
.hp .rv{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.hp .rv.in{opacity:1;transform:none}

@media(max-width:960px){
  .hp-why-b{grid-template-columns:minmax(0,1fr);gap:24px}
  .hp-steps{grid-template-columns:minmax(0,1fr)}
  .hp-step,.hp-step+.hp-step{padding:28px 0 36px;border-left:0}.hp-step+.hp-step{border-top:1px solid var(--hair)}
  .hp-n{margin-bottom:24px}
  .hp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-beliefs li{grid-template-columns:minmax(0,1fr);gap:10px}
}
@media(max-width:640px){
  .hp-hero{min-height:0;padding-top:20px}
  .hp-tile:nth-child(n+4){display:none}.hp-tile{width:30vw}
  .btn.hp-go{width:100%;max-width:340px}
  .hp-grid{grid-template-columns:minmax(0,1fr)}.hp-grid li{min-height:0}
}
@media(prefers-reduced-motion:reduce){.hp .rv{opacity:1;transform:none;transition:none}}

/* layered cards */
.hp-hero{min-height:calc(100svh - 72px)}
.hp-stack{position:relative;padding-top:clamp(24px,4vw,56px);padding-bottom:clamp(40px,6vw,88px)}
.hp-card{position:sticky;top:calc(88px + var(--i,0) * 16px);min-height:min(78svh,640px);margin-bottom:clamp(20px,3vw,36px);padding:clamp(24px,3.4vw,52px);border-radius:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(24px,4vw,60px);transform-origin:50% 0;will-change:transform;box-shadow:0 -24px 60px -34px rgba(23,22,19,.45),0 1px 0 rgba(23,22,19,.06);border:1px solid rgba(23,22,19,.08)}
.hp-card.k0{--i:0;background:#fff}
.hp-card.k1{--i:1;background:#EEE9DC}
.hp-card.k2{--i:2;background:#DFD7C4}
.hp-card.k3{--i:3;background:#1c1a17;color:#F4F1E9;border-color:rgba(255,255,255,.08)}
.hp-card.k3 .hp-kick,.hp-card.k3 .hp-lede{color:#b8b2a8}
.hp-card-b{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:end}
.hp-word{font:600 clamp(60px,12vw,190px)/.9 var(--sans);letter-spacing:-.065em}
.hp-card .hp-lede{max-width:26em}
.hp-card:last-child{margin-bottom:0}
@media(max-width:960px){.hp-card-b{grid-template-columns:minmax(0,1fr);gap:20px}.hp-card{min-height:min(70svh,520px)}}
@media(max-width:640px){.hp-card{top:calc(72px + var(--i,0) * 12px)}}
@media(prefers-reduced-motion:reduce){.hp-card{will-change:auto}}

/* full-screen layering: every card is a whole screen, edge to edge, and the next one rises over it */
.hp-stack{padding:clamp(24px,4vw,56px) 0 0;max-width:none}
.hp-card{top:0;margin:0;min-height:100svh;width:100%;border:0;border-radius:clamp(20px,2.4vw,36px) clamp(20px,2.4vw,36px) 0 0;padding:calc(76px + clamp(28px,5vw,72px)) var(--pad) clamp(32px,5vw,72px);box-shadow:0 -30px 80px -30px rgba(23,22,19,.5);will-change:filter}
.hp-card.k0{--i:0}
.hp-card:last-child{margin-bottom:0}
@media(max-width:960px){.hp-card{min-height:100svh}}
@media(max-width:640px){.hp-card{top:0;padding-top:calc(64px + 28px);border-radius:22px 22px 0 0}}



/* the last layer: only the name, big and bold */
.hp-end{position:relative;z-index:2;min-height:100svh;display:flex;align-items:center;justify-content:center;background:#1c1a17;color:#F4F1E9;border-radius:clamp(20px,2.4vw,36px) clamp(20px,2.4vw,36px) 0 0;box-shadow:0 -30px 80px -30px rgba(23,22,19,.5);overflow:hidden}
.hp-name{margin:0;font:700 20.6vw/.8 var(--sans);letter-spacing:-.075em;white-space:nowrap}

/* no shadows: a card simply enters the space */
.hp-card,.hp-end{box-shadow:none!important;filter:none!important}

/* one card: the name and the footer information arrive together */
.hp-end{display:block;min-height:0;padding:clamp(48px,7vw,104px) 0 0;overflow:hidden}
.hp-end .hp-name{padding:0 var(--pad);margin:0 0 clamp(36px,5vw,72px)}
.hp-end .foot{background:transparent;border:0;border-radius:0;box-shadow:none;margin:0}
.hp-end .foot-in{padding-top:0}

/* no gaps: where one section ends the next begins */
.hp-stack{padding-bottom:0!important}
.hp-kit{margin-top:0!important}
.hp-card:last-child{margin-bottom:0}

/* the last statement stays pinned while the closing card slides up over it */
.hp-stand{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;background:#F4F1E9;z-index:1}
.hp-end{margin-top:0}

/* a little room between the name and the footer information */
.hp-end .hp-name{margin-bottom:27px}

/* the descender of the p now has its own room, then 27px before the footer */
.hp-end .hp-name{line-height:1.12;margin-bottom:27px}

.hp-end .hp-name{margin-bottom:54px}

/* a photo, video or animation behind the hero or a card */
.hp-hero,.hp-card{position:relative}
.hp-media{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;background-size:cover;pointer-events:none}
.hp-media::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--ov,.4)}
.has-media.tone-dark .hp-media::after{background:#fff}
.hp-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-card>:not(.hp-media),.hp-hero>:not(.hp-media){position:relative;z-index:1}
.has-media.tone-light,.has-media.tone-light .hp-h2,.has-media.tone-light .hp-word,.has-media.tone-light .hp-big{color:#fff}
.has-media.tone-light .hp-lede,.has-media.tone-light .hp-kick,.has-media.tone-light .hp-act p{color:rgba(255,255,255,.82)}
.has-media.tone-light em{color:rgba(255,255,255,.8)}
.has-media.tone-light .btn.pri{background:#fff;border-color:#fff;color:#171613}
.hp-hero.has-media{padding-left:0;padding-right:0}

/* the cards must stay sticky: an earlier rule for the background media had set them to relative */
.hp-card{position:sticky;top:0}

/* a rotating gallery behind a section */
.hp-media .hp-layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease}
.hp-media .hp-layer.on{opacity:1}
.hp-media .hp-layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* subscribe */
.hp-sub{position:relative;z-index:2;background:#fff;padding:clamp(72px,10vw,140px) 0}
.hp-sub-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,6vw,100px);align-items:end}
.hp-sub .hp-kick{margin-bottom:18px}
.hp-sub .hp-lede{margin-top:20px}
.hp-sub-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.hp-sub-form input[type=email]{height:56px;border:1px solid rgba(23,22,19,.18);border-radius:999px;padding:0 24px;font:400 16px var(--sans);background:#fff;color:#171613;min-width:0}
.hp-sub-form input[type=email]:focus{outline:0;border-color:#171613;box-shadow:0 0 0 3px rgba(23,22,19,.08)}
.hp-sub-form .btn{min-height:56px;padding:0 30px;font-size:15.5px}
.hp-sub-form .btn:disabled{opacity:.7;cursor:wait}
.hp-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sub-msg{grid-column:1/-1;min-height:20px;margin:6px 4px 0;font:500 14px var(--sans);color:var(--hp-mute,#6b665d)}
.sub-msg.good{color:#1f7a3a}.sub-msg.bad{color:#b3261e}
@media(max-width:860px){.hp-sub-in{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.hp-sub-form{grid-template-columns:minmax(0,1fr)}.hp-sub-form .btn{width:100%}}

/* the subscribe section stays pinned, and the name and footer card slide over it (and over the statement behind it) */
.hp-sub{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;z-index:2}
.hp-end{z-index:3}

/* the subscribe section can carry a photo, video or animation behind its words */
.hp-sub{overflow:hidden}
.hp-sub>.hp-media{position:absolute;inset:0;z-index:0;border-radius:0}
.hp-sub>:not(.hp-media){position:relative;z-index:1}
.hp-sub.has-media.tone-light .hp-h2,.hp-sub.has-media.tone-light .hp-kick,.hp-sub.has-media.tone-light .hp-lede{color:#fff}
.hp-sub.has-media.tone-light .hp-lede,.hp-sub.has-media.tone-light .hp-kick{color:rgba(255,255,255,.85)}
.hp-sub.has-media .hp-sub-form input[type=email]{background:rgba(255,255,255,.92);border-color:transparent}
.hp-sub.has-media.tone-light .sub-msg{color:#fff}

/* ---- the name: a picture or clip shows through the letters ---- */
.hp-namewrap{position:relative;isolation:isolate;background:#1c1a17;margin:0 0 54px}
.hp-namewrap>.hp-media{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:0}
.hp-namewrap>.hp-media::after{display:none}
.hp-namewrap .hp-name{position:relative;z-index:1;margin:0;padding:0 var(--pad);color:#F4F1E9;background:transparent}
/* with media: white letters multiplied over the picture, on the card colour, so the picture shows only inside the letters */
.hp-namewrap.has-media .hp-name{background:#1c1a17;color:#fff;mix-blend-mode:multiply}
.hp-end .hp-namewrap{margin-bottom:54px}
.hp-end .hp-namewrap .hp-name{margin:0}

.hp-stack{padding-top:0!important}
.hp-card.k0{border-radius:0!important}
.hp-hero{padding-bottom:clamp(48px,6vw,96px)}

/* lift everything outside the letters back to the exact card colour */
.hp-namewrap.has-media::after{content:"";position:absolute;inset:0;background:#1c1a17;mix-blend-mode:lighten;z-index:2;pointer-events:none}

/* first card: rounded again, rising over the end of the hero so its corners show the hero, never the page */
.hp-card.k0{border-radius:clamp(20px,2.4vw,36px) clamp(20px,2.4vw,36px) 0 0!important}
.hp-stack{margin-top:calc(-1 * clamp(20px,2.4vw,36px));position:relative;z-index:1}
.hp-hero{padding-bottom:calc(clamp(48px,6vw,96px) + clamp(20px,2.4vw,36px))}

/* ---- what we stand for: a heading on the left, three promises you can run your eye down ---- */
.hp-stand{background:#F4F1E9}
.hp-stand-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,7vw,120px);align-items:center;width:100%}
.hp-stand-h .hp-h2{max-width:11em;margin-top:18px}
.hp-stand-h .hp-h2 em{font:italic 400 1em/1 var(--serif,'Fraunces',Georgia,serif);letter-spacing:-.03em;color:#6b665d}
.hp-promises{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair,rgba(23,22,19,.14))}
.hp-promises li{display:grid;grid-template-columns:clamp(48px,6vw,84px) minmax(0,1fr);gap:clamp(8px,2vw,24px);align-items:baseline;padding:clamp(24px,3.4vw,44px) 0;border-bottom:1px solid var(--hair,rgba(23,22,19,.14));transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.hp-pn{font:500 13px var(--sans);letter-spacing:.14em;color:#8d877d;transition:color .3s}
.hp-promises h3{font:600 clamp(28px,3.4vw,52px)/1.02 var(--sans);letter-spacing:-.05em;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.hp-promises p{margin-top:12px;font:400 clamp(16px,1.25vw,19px)/1.6 var(--sans);color:#6b665d;max-width:28em}
@media(hover:hover){
  .hp-promises:hover li{opacity:.42}
  .hp-promises li:hover{opacity:1}
  .hp-promises li:hover h3{transform:translateX(10px)}
  .hp-promises li:hover .hp-pn{color:#171613}
}
@media(max-width:860px){.hp-stand-in{grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}.hp-stand-h .hp-h2{max-width:none}}

/* ---- what we stand for: tiles that drift from left to right ---- */
.hp-stand{overflow:hidden;gap:clamp(28px,5vw,64px)}
.hp-stand-top{width:100%}
.hp-stand-top .hp-h2{max-width:14em;margin-top:18px}
.hp-stand-top .hp-h2 em{font:italic 400 1em/1 var(--serif,'Fraunces',Georgia,serif);letter-spacing:-.03em;color:#6b665d}
.hp-tiles{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hp-ttrack{list-style:none;margin:0;padding:6px 0;display:flex;gap:clamp(14px,1.6vw,22px);width:max-content;animation:hpTiles 48s linear infinite}
.hp-tiles:hover .hp-ttrack{animation-play-state:paused}
@keyframes hpTiles{from{transform:translateX(-33.333%)}to{transform:translateX(0)}}
.hp-tile2{flex:none;width:clamp(280px,28vw,420px);min-height:clamp(220px,24vw,320px);padding:clamp(22px,2.4vw,34px);border-radius:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;border:1px solid rgba(23,22,19,.08);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.hp-tile2:hover{transform:translateY(-6px)}
.hp-tile2.t0{background:#fff}.hp-tile2.t1{background:#EEE9DC}.hp-tile2.t2{background:#1c1a17;color:#F4F1E9;border-color:rgba(255,255,255,.08)}
.hp-tile2 .hp-pn{font:500 13px var(--sans);letter-spacing:.14em;color:#8d877d}
.hp-tile2 h3{font:600 clamp(26px,2.8vw,40px)/1.04 var(--sans);letter-spacing:-.05em;margin:0}
.hp-tile2 p{margin:10px 0 0;font:400 clamp(15px,1.15vw,17px)/1.55 var(--sans);color:#6b665d;max-width:20em}
.hp-tile2.t2 p{color:#b8b2a8}
@media(prefers-reduced-motion:reduce){.hp-ttrack{animation:none;transform:none;flex-wrap:wrap;width:auto;padding:0 var(--pad)}.hp-tile2[aria-hidden=true]{display:none}.hp-tiles{-webkit-mask-image:none;mask-image:none}}

/* equal spacing per tile, so the loop is seamless */
.hp-ttrack{gap:0}
.hp-tile2{margin-right:clamp(14px,1.6vw,22px)}

/* ---- what we stand for, second take: airy white, soft gradient tiles, calm and confident ---- */
.hp-stand{background:#fff;gap:clamp(36px,5vw,72px)}
.hp-stand-top .hp-kick{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:99px;background:#F4F1E9;color:#4a463e;letter-spacing:.12em;margin-bottom:0}
.hp-stand-top .hp-h2{font-weight:500;letter-spacing:-.045em;line-height:1.04;max-width:13em;margin-top:22px}
.hp-stand-top .hp-h2 em{color:#8d877d}
.hp-ttrack{animation-duration:64s}
.hp-tile2{width:clamp(250px,22vw,340px);min-height:clamp(340px,31vw,460px);padding:20px;border:0;border-radius:28px;position:relative;overflow:hidden;justify-content:space-between;color:#171613;isolation:isolate;box-shadow:none}
.hp-tile2::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--g)}
.hp-tile2::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.55) 100%)}
.hp-tile2.t0{--g:radial-gradient(120% 90% at 20% 15%,#FFD9C2 0,transparent 55%),radial-gradient(90% 80% at 90% 30%,#FFB8D2 0,transparent 60%),radial-gradient(100% 90% at 50% 100%,#FFE9A8 0,transparent 60%),#FFF3EC;background:transparent;color:#171613}
.hp-tile2.t1{--g:radial-gradient(110% 90% at 80% 10%,#BFD8FF 0,transparent 58%),radial-gradient(90% 80% at 10% 40%,#D9C8FF 0,transparent 60%),radial-gradient(100% 90% at 60% 100%,#C8F0F2 0,transparent 60%),#EEF3FF;background:transparent;color:#171613}
.hp-tile2.t2{--g:radial-gradient(110% 90% at 15% 15%,#CFF3D3 0,transparent 58%),radial-gradient(90% 80% at 90% 35%,#F4F7B5 0,transparent 60%),radial-gradient(100% 90% at 40% 100%,#BDEBDD 0,transparent 60%),#F0FAF1;background:transparent;color:#171613}
.hp-tile2 .hp-pn{align-self:flex-start;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:99px;background:rgba(255,255,255,.7);color:#171613;font:500 12px var(--sans);letter-spacing:.1em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hp-tile2 h3{font:500 clamp(24px,2.3vw,32px)/1.06 var(--sans);letter-spacing:-.04em}
.hp-tile2 p,.hp-tile2.t2 p{color:rgba(23,22,19,.72);font-size:clamp(14.5px,1.05vw,16px);max-width:19em}
.hp-tile2:hover{transform:translateY(-4px)}

.hp-tile2{justify-content:flex-start}
.hp-tile2 h3{margin-top:auto}
.hp-tile2 p{margin-top:10px}

/* keep the whole promise section, heading and tiles with their words, inside one screen */
.hp-stand{padding:clamp(88px,12vh,120px) 0 clamp(24px,4vh,48px);gap:clamp(20px,4vh,44px);justify-content:center}
.hp-stand-top .hp-h2{font-size:clamp(30px,3.9vw,60px);margin-top:16px;max-width:15em}
.hp-tile2{width:clamp(240px,21vw,320px);min-height:0;height:clamp(210px,33vh,310px);padding:18px}
.hp-tile2 h3{font-size:clamp(22px,2vw,28px)}
.hp-tile2 p{font-size:clamp(14px,1vw,15.5px)}
@media(max-width:640px){.hp-tile2{width:min(76vw,300px);height:clamp(220px,34vh,300px)}}

.hp-tile2 p{min-height:4.7em}

/* ---- what we stand for, third take: wide quiet panels with a line drawing, light and dark in turn ---- */
.hp-stand{background:#fff}
.hp-ttrack{animation-duration:70s}
.hp-t3{flex:none;width:clamp(300px,31vw,460px);height:clamp(220px,34vh,320px);margin-right:clamp(14px,1.6vw,22px);border-radius:24px;border:1px solid rgba(23,22,19,.12);display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;background:#fff;color:#171613;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s}
.hp-t3:hover{transform:translateY(-4px);border-color:rgba(23,22,19,.3)}
.hp-t3.k1{background:#171613;color:#F4F1E9;border-color:#171613}
.hp-t3.k2{background:#F4F1E9}
.hp-t3-art{display:grid;place-items:center;padding:clamp(14px,2.4vh,26px) 20px 0;min-height:0}
.hp-t3-art svg{height:100%;max-height:clamp(70px,13vh,120px);width:auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.hp-t3 .cur{animation:hpBlink 1.1s steps(1) infinite}
.hp-t3-tx{padding:12px clamp(18px,1.8vw,26px) clamp(16px,2.4vh,24px)}
.hp-t3-n{display:block;margin-bottom:8px;font:500 11.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.hp-t3 h3{margin:0;font:500 clamp(22px,2vw,28px)/1.08 var(--sans);letter-spacing:-.04em}
.hp-t3 p{margin:6px 0 0;font:400 clamp(13.5px,1vw,15px)/1.5 var(--sans);opacity:.68;max-width:26em}
@media(max-width:640px){.hp-t3{width:min(80vw,320px)}}
@media(prefers-reduced-motion:reduce){.hp-t3[aria-hidden=true]{display:none}.hp-t3 .cur{animation:none}}

/* ---- what we stand for, no tiles: three big statements drifting left to right, and three plain lines under them ---- */
.hp-stand{background:#fff;gap:clamp(22px,4.5vh,52px)}
.hp-ticker{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hp-tk-track{display:flex;align-items:center;width:max-content;animation:hpTiles 60s linear infinite}
.hp-ticker:hover .hp-tk-track{animation-play-state:paused}
.hp-tk-track .hp-w{font:500 clamp(46px,8.2vw,150px)/1.05 var(--sans);letter-spacing:-.055em;color:#171613;white-space:nowrap;padding:0 .12em}
.hp-tk-track .hp-w.o{color:transparent;-webkit-text-stroke:1.6px #171613}
.hp-tk-track i{flex:none;width:clamp(10px,1.3vw,20px);height:clamp(10px,1.3vw,20px);border-radius:50%;background:#171613;margin:0 clamp(18px,2.6vw,44px)}
.hp-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,64px);width:100%}
.hp-three p{margin:0;padding-top:16px;border-top:1px solid rgba(23,22,19,.16);font:400 clamp(15px,1.2vw,18px)/1.55 var(--sans);color:#4a463e;max-width:24em}
.hp-three b{display:block;margin-bottom:10px;font:500 12px var(--sans);letter-spacing:.14em;color:#8d877d}
@media(max-width:760px){.hp-three{grid-template-columns:minmax(0,1fr);gap:14px}.hp-three p{padding-top:12px}}
@media(prefers-reduced-motion:reduce){.hp-tk-track{animation:none;transform:none}.hp-tk-track .hp-w[aria-hidden=true],.hp-tk-track i:nth-of-type(n+4){display:none}}

/* no big gap above: the section is only as tall as its content, starting just under the bar */
.hp-stand{min-height:0;justify-content:flex-start;padding:clamp(24px,5vh,52px) 0 clamp(40px,7vh,80px)}