/* ==========================================================
   i-BnB  |  Colour system: RED · WHITE · BROWN
   ----------------------------------------------------------
   White       #ffffff   page background (main surface)
   Cream       #fbf5f3   alternate sections, soft cards
   Red         #c8142b   buttons, links, accents
   Deep red    #a30f22   hover state
   Blush       #fdecee   tags, light red tint
   Brown       #3b2420   contact band, footer
   Dark brown  #241513   body text, headings
   Muted brown #6f5d59   secondary text
   ========================================================== */
:root{
  --white:#ffffff; --cream:#fbf5f3; --red:#c8142b; --red-d:#a30f22; --blush:#fdecee;
  --brown:#3b2420; --brown-d:#241513; --brown-m:#6f5d59; --line:#2415131f;
  --head:Outfit,system-ui,sans-serif; --body:"DM Sans",system-ui,sans-serif;
  --w:min(1160px,100% - 40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font:400 17px/1.65 var(--body);background:var(--white);color:var(--brown-d);overflow-x:hidden}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.1;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wrap{width:var(--w);margin-inline:auto}
section{padding:88px 0}
.alt{background:var(--cream)}
h2{font-size:clamp(30px,4vw,46px);margin-bottom:14px}
.sub{color:var(--brown-m);max-width:560px}
.head{margin-bottom:44px}

/* Buttons */
.btn{display:inline-block;padding:14px 26px;border-radius:99px;background:var(--red);color:#fff;font:600 15px var(--head);border:1.5px solid var(--red);cursor:pointer;transition:background .2s,transform .2s}
.btn:hover{background:var(--red-d);border-color:var(--red-d);transform:translateY(-2px)}
.btn.line{background:transparent;color:var(--brown-d);border-color:var(--brown-d)}
.btn.line:hover{background:var(--brown-d);color:#fff}
.btn.sm{padding:10px 20px;font-size:14px}

/* Header */
header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--line)}
.bar{width:var(--w);margin-inline:auto;height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font:700 24px var(--head);display:flex;align-items:baseline;gap:8px}
.brand b{color:var(--red)}
.brand small{font:500 11px var(--body);color:var(--brown-m);letter-spacing:.04em}
nav{display:flex;align-items:center;gap:30px;font-weight:500;font-size:15px}
nav a:not(.btn):hover{color:var(--red)}
.burger{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;color:var(--brown-d);font-size:26px}

/* Hero */
.hero{padding:80px 0 72px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(38px,5vw,68px);margin-bottom:20px}
.hero h1 span{color:var(--red)}
.lead{color:var(--brown-m);font-size:19px;max-width:520px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.plan{background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:12px 26px}
.plan li{display:grid;grid-template-columns:78px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--line)}
.plan li:last-child{border:0}
.plan b{font:600 15px var(--head);color:var(--red)}
.plan h3{font-size:19px;margin-bottom:2px}
.plan p{color:var(--brown-m);font-size:15px;line-height:1.5}

/* Facts */
.facts{padding:0;border-block:1px solid var(--line)}
.facts ul{width:var(--w);margin-inline:auto;display:grid;grid-template-columns:repeat(4,1fr)}
.facts li{padding:34px 24px;border-left:1px solid var(--line)}
.facts li:first-child{border-left:0;padding-left:0}
.facts b{display:block;font:600 clamp(34px,4vw,50px)/1 var(--head);color:var(--red);margin-bottom:8px}
.facts span{color:var(--brown-m);font-size:15px;line-height:1.45;display:block}

/* Cards */
.grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:28px;transition:border-color .2s}
.card:hover{border-color:var(--red)}
.card h3{font-size:22px;margin-bottom:8px}
.card p{color:var(--brown-m);font-size:16px}
.card small{display:block;color:var(--red);font-weight:700;font-size:13px;margin-bottom:6px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.tags li{font-size:13px;font-weight:500;padding:4px 12px;border-radius:99px;background:var(--blush);color:var(--red)}

/* Process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.steps li{counter-increment:s;border-top:3px solid var(--red);padding-top:20px}
.steps li::before{content:"Week " counter(s);font:600 14px var(--head);color:var(--red)}
.steps h3{font-size:21px;margin:6px 0 8px}
.steps p{color:var(--brown-m);font-size:15.5px}

/* Stack */
.stack{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stack h3{font-size:17px;margin-bottom:8px;color:var(--red)}
.stack li{padding:2px 0;color:var(--brown-m)}

/* FAQ */
.faq{max-width:780px}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font:500 20px var(--head)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-size:28px;line-height:1;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:10px;color:var(--brown-m)}

/* Contact */
.contact{background:var(--brown);color:#fff}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact .sub{color:#dccbc7}
.info{margin-top:24px;display:grid;gap:6px;font-weight:500}
form{display:grid;gap:12px}
input,select,textarea{width:100%;padding:15px 18px;border-radius:12px;border:1.5px solid #ffffff40;background:#ffffff12;color:#fff;font:inherit}
select option{color:var(--brown-d)}
::placeholder{color:#cdb9b4}
input:focus,select:focus,textarea:focus{outline:0;border-color:#ff7a88}
.contact .btn{background:var(--red);border-color:var(--red)}
.contact .btn:hover{background:#fff;color:var(--brown-d);border-color:#fff}
.ok{min-height:1.5em;font-size:14px;color:#ff9aa5}

/* Footer */
footer{background:var(--brown-d);color:#cdb9b4;padding:48px 0 28px;font-size:15px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
footer h4{color:#fff;margin-bottom:10px;font-family:var(--head)}
footer a{display:block;padding:3px 0}
footer a:hover{color:#ff7a88}
.legal{margin-top:36px;padding-top:20px;border-top:1px solid #ffffff1f;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:14px}

/* Responsive */
@media(max-width:900px){
  section{padding:64px 0}
  .hero .wrap,.contact .wrap{grid-template-columns:1fr;gap:36px}
  .grid,.stack{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;gap:32px 20px}
  .facts ul{grid-template-columns:1fr 1fr}
  .facts li:nth-child(3){border-left:0;padding-left:0}
  .facts li:nth-child(n+3){border-top:1px solid var(--line)}
  .burger{display:block}
  nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;background:var(--white);border-bottom:1px solid var(--line);display:none}
  nav.open{display:flex}
  nav a{padding:12px 0}
  nav .btn{text-align:center;margin-top:8px}
  .fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}
}
@media(max-width:560px){
  .grid,.stack,.steps,.fgrid{grid-template-columns:1fr}
  .brand small{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Logo image (icons/Logo image.png) */
.brand{align-items:center}
.brand img{height:34px;width:auto;border-radius:7px}

/* ==========================================================
   Contact section: red palette (footer stays dark brown)
   ========================================================== */
.contact{background:linear-gradient(135deg,#c8142b 0%,#a30f22 100%);color:#fff}
.contact .sub{color:#ffe3e6}
.contact .info li{color:#fff}
.contact input,.contact select,.contact textarea{background:#fff;color:var(--brown-d);border:1.5px solid transparent}
.contact ::placeholder{color:var(--brown-m)}
.contact input:focus,.contact select:focus,.contact textarea:focus{border-color:var(--brown-d);box-shadow:0 0 0 3px #ffffff55}
.contact .btn{background:var(--brown-d);border-color:var(--brown-d);color:#fff}
.contact .btn:hover{background:#fff;border-color:#fff;color:var(--red)}
.contact .ok{color:#fff;font-weight:500}
.contact :focus-visible{outline-color:#fff}

/* Header logo: icons/LOGO 2 (1).png */
.brand img{height:44px;width:auto;border-radius:0;display:block}

/* Blend the logo's light-grey box into the white navbar */
.brand img{mix-blend-mode:multiply;filter:brightness(1.08) contrast(1.25);border-radius:0}

/* ==========================================================
   GRAPHICS + ANIMATIONS
   ========================================================== */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--red);z-index:100}
header{transition:box-shadow .3s}header.stuck{box-shadow:0 8px 30px #24151318}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,#ffffff55,transparent);transform:skewX(-20deg);transition:left .7s}
.btn:hover::after{left:140%}

/* Hero graphics */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.gridbg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;-webkit-mask:radial-gradient(ellipse at 70% 40%,#000 5%,transparent 70%);mask:radial-gradient(ellipse at 70% 40%,#000 5%,transparent 70%)}
.blobs i{position:absolute;border-radius:50%;filter:blur(60px);animation:float 14s ease-in-out infinite alternate;transition:margin .4s ease-out}
.blobs i:nth-child(1){width:380px;height:380px;background:#c8142b4d;top:-80px;right:6%}
.blobs i:nth-child(2){width:300px;height:300px;background:#3b242030;bottom:-70px;left:-60px;animation-delay:-5s}
.blobs i:nth-child(3){width:220px;height:220px;background:#ff7a8850;top:38%;left:42%;animation-delay:-9s}
@keyframes float{to{transform:translate(40px,-30px) scale(1.15)}}
.hero h1 span{color:inherit}
.hero h1 em{font-style:normal;color:var(--red)}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em}
.hero h1 .w span{display:inline-block;transform:translateY(110%);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*70ms + .1s)}
@keyframes up{to{transform:none}}
.typed{font:600 20px var(--head);margin-bottom:14px;color:var(--brown-m)}
.typed b{color:var(--red);font-weight:600}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--red);margin-left:3px;vertical-align:text-bottom;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.visual{position:relative}
.plan li{opacity:.45;transition:opacity .4s}.plan li.on{opacity:1}
.plan li.on b{animation:nudge .6s}
@keyframes nudge{40%{transform:translateX(6px)}}
.fb{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 16px;font:600 14px var(--head);box-shadow:0 14px 40px #24151322;animation:bob 5s ease-in-out infinite alternate}
.fb i{width:9px;height:9px;border-radius:50%;background:var(--red);animation:pulse 1.8s infinite}
.f1{top:-20px;right:-8px}.f2{bottom:-20px;left:-14px;animation-delay:-2.5s}
@keyframes bob{to{transform:translateY(-10px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 #c8142b66}100%{box-shadow:0 0 0 10px #c8142b00}}

/* Marquee */
.marquee{background:var(--brown);color:#fff;overflow:hidden;padding:20px 0}
.track{display:flex;width:max-content;animation:scroll 32s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track div{display:flex;gap:44px;padding-right:44px}
.track span{font:600 24px var(--head);white-space:nowrap;display:flex;align-items:center;gap:44px}
.track span::after{content:"✦";color:#ff7a88;font-size:18px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Scroll reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* Cards: icon, spotlight, lift */
.card{position:relative;overflow:hidden}
.card.rv{transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .3s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--x,50%) var(--y,0%),#c8142b18,transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::before{opacity:1}
.card.in:hover{transform:translateY(-6px);box-shadow:0 24px 50px #c8142b1f}
.ico{width:54px;height:54px;border-radius:14px;background:var(--blush);display:grid;place-items:center;margin-bottom:18px;transition:background .3s,transform .4s}
.ico svg{width:28px;height:28px;fill:none;stroke:var(--red);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.card:hover .ico{background:var(--red);transform:rotate(-8deg) scale(1.08)}
.card:hover .ico svg{stroke:#fff}

/* Work thumbnails */
#work .card{padding:0}
#work .card>:not(.pv){margin-inline:28px}
#work .card small{margin-top:22px}
#work .card p{margin-bottom:28px}
.pv{position:relative;height:170px;overflow:hidden}
.pv::before{content:"";position:absolute;inset:-30px;background:repeating-linear-gradient(135deg,#ffffff1c 0 2px,transparent 2px 22px);transition:transform .8s}
#work .card:hover .pv::before{transform:translateX(22px)}
.pv::after{content:"";position:absolute;left:26px;bottom:-14px;width:58%;height:104px;border-radius:12px 12px 0 0;box-shadow:0 10px 30px #00000033;transition:transform .5s;
  background:linear-gradient(var(--red) 0 0) 16px 18px/34% 9px no-repeat,linear-gradient(#eadbd8 0 0) 16px 40px/72% 8px no-repeat,linear-gradient(#f3e9e6 0 0) 16px 58px/56% 8px no-repeat,#fff}
#work .card:hover .pv::after{transform:translateY(-12px)}
.pv em{position:absolute;right:22px;top:14px;font:700 64px/1 var(--head);font-style:normal;color:transparent;-webkit-text-stroke:1.5px #ffffffb0}
.v1{background:linear-gradient(135deg,#c8142b,#3b2420)}.v2{background:linear-gradient(135deg,#3b2420,#241513)}.v3{background:linear-gradient(135deg,#e9515f,#c8142b)}.v4{background:linear-gradient(135deg,#241513,#c8142b)}.v5{background:linear-gradient(135deg,#8c0d1d,#3b2420)}

/* Process line draws in */
.steps li{border-top:3px solid var(--line);position:relative}
.steps li::after{content:"";position:absolute;top:-3px;left:0;height:3px;width:0;background:var(--red);transition:width 1.2s cubic-bezier(.2,.8,.2,1) .25s}
.steps li.in::after{width:100%}

/* Tech list hover */
.stack li{transition:transform .25s,color .25s;cursor:default}
.stack li:hover{transform:translateX(8px);color:var(--red)}

/* Contact orbs */
.contact{position:relative;overflow:hidden}
.contact .wrap{position:relative;z-index:1}
.orbs i{position:absolute;border-radius:50%;border:1.5px solid #ffffff30;animation:float 12s ease-in-out infinite alternate}
.orbs i:nth-child(1){width:340px;height:340px;top:-120px;right:-80px}
.orbs i:nth-child(2){width:200px;height:200px;bottom:-60px;left:36%;animation-delay:-4s;background:#ffffff0d}
.orbs i:nth-child(3){width:120px;height:120px;top:30%;left:-40px;animation-delay:-8s}

/* Back to top */
.totop{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;border:0;font-size:20px;cursor:pointer;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .3s,transform .3s;z-index:55;box-shadow:0 10px 30px #c8142b55}
.totop.show{opacity:1;transform:none;pointer-events:auto}

@media(max-width:900px){.f1{right:0}.f2{left:0}}
@media(prefers-reduced-motion:reduce){.blobs i,.orbs i,.track,.fb,.caret{animation:none!important}.rv{opacity:1;transform:none}.hero h1 .w span{transform:none}}

/* ==========================================================
   HERO STAGE: kinetic headline, 3D sculpture, parallax
   ========================================================== */
header{border-bottom-color:transparent;animation:fadedown .9s cubic-bezier(.2,.8,.2,1) backwards;transition:border-color .3s,box-shadow .3s}
header.stuck{border-bottom-color:var(--line)}
@keyframes fadedown{from{opacity:0;transform:translateY(-100%)}}
nav a:not(.btn){font-size:14px;color:var(--brown-m)}
nav .btn{padding:11px 24px;box-shadow:0 8px 26px #c8142b55}
.btn.lg{padding:18px 34px;font-size:16px;box-shadow:0 14px 40px #c8142b55}
.btn.lg span{display:inline-block;transition:transform .3s}.btn.lg:hover span{transform:translateX(6px)}

.stage{position:relative;padding:0;overflow:hidden;background:var(--white)}
.layer{position:absolute;inset:0;pointer-events:none;will-change:transform;transform:translate3d(var(--tx,0px),var(--ty,0px),0)}
.frame{position:absolute;left:50%;top:0;bottom:0;width:var(--w);transform:translateX(-50%)}
.in-up{animation:fadeup .9s cubic-bezier(.16,1,.3,1) backwards;animation-delay:var(--d,0s)}
@keyframes fadeup{from{opacity:0;transform:translateY(24px)}}

/* technical grid + micro-labels */
.frame .v,.frame .h{position:absolute;background:var(--line);animation:grow 1.5s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(.5s + var(--k)*.12s)}
.frame .v{top:0;bottom:0;width:1px;left:calc(var(--k)*25%);transform-origin:top}
.frame .v:last-of-type{margin-left:-1px}
.frame .h{left:0;right:0;height:1px;top:calc(var(--k)*33.3%);transform-origin:left;animation-name:growx}
@keyframes grow{from{transform:scaleY(0)}}@keyframes growx{from{transform:scaleX(0)}}
.frame .x{position:absolute;transform:translate(-50%,-50%);font:400 18px/1 var(--head);color:var(--red);animation:fade 1s 1.6s backwards}
@keyframes fade{from{opacity:0}}
.ml{font:500 11px/1.6 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--brown-m)}
.frame .ml{position:absolute;animation:fade 1s 1.3s backwards}
.ml.tl{top:18px;left:0}.ml.tr{top:18px;right:0}.ml.br{bottom:30px;right:0}.ml.fig{right:0;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}

/* giant cropped letters */
.giant{position:absolute;left:-3vw;bottom:-.2em;font:700 clamp(260px,52vw,820px)/.8 var(--head);letter-spacing:-.07em;white-space:nowrap;color:var(--blush);-webkit-text-stroke:1.5px #c8142b22;user-select:none;animation:giantin 1.6s cubic-bezier(.16,1,.3,1) .4s backwards}
@keyframes giantin{from{opacity:0;transform:translateY(8%)}}

/* 3D sculpture */
.sculpt{position:absolute;right:-1%;top:50%;width:min(44vw,560px);aspect-ratio:1;margin-top:calc(min(44vw,560px) / -2);animation:pop 1.8s cubic-bezier(.16,1,.3,1) 1s backwards}
.sculpt canvas{display:block;width:100%!important;height:100%!important}
.sculpt::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,#c8142b33,transparent 65%);filter:blur(30px);z-index:-1}
.sculpt.nogl{border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff7a88,#c8142b 45%,#3b2420 100%);transform:scale(.7)}
@keyframes pop{from{opacity:0;transform:scale(.7) rotate(-12deg)}}

/* content */
.st-in{position:relative;z-index:3;width:var(--w);margin-inline:auto;min-height:calc(100svh - 72px);padding:48px 0 110px;display:flex;flex-direction:column;justify-content:center;gap:30px}
.st-top{display:flex;align-items:center;gap:18px}
.mark{overflow:visible}
.mark rect,.mark path,.mark circle:not(.dot){fill:none;stroke:var(--brown-d);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;animation:draw 1.1s cubic-bezier(.6,0,.2,1) backwards;animation-delay:var(--d,0s)}
.mark .acc{stroke:var(--red)}
.mark .dot{fill:var(--red);transform-box:fill-box;transform-origin:center;animation:dotpop .6s cubic-bezier(.3,1.6,.5,1) 1.5s backwards}
@keyframes draw{from{stroke-dashoffset:1}}@keyframes dotpop{from{transform:scale(0)}}
#kin{font:700 clamp(38px,9.6vw,150px)/.94 var(--head);letter-spacing:-.045em;color:var(--brown-d)}
#kin .ln{display:block}
#kin em{font-style:normal;color:var(--red)}
#kin.is-split .kw{display:inline-block;white-space:nowrap}
#kin.is-split .kc{display:inline-block;overflow:hidden;vertical-align:top;padding:.02em 0 .08em}
#kin.is-split .kc>span{display:inline-block;animation:kup 1.1s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(.95s + var(--i)*34ms)}
@keyframes kup{from{transform:translateY(108%) rotate(6deg)}}
.st-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px 40px}
.st-bot .lead{max-width:440px}.st-bot .cta{margin:0}

/* scroll indicator */
.scroll{position:absolute;z-index:4;left:50%;bottom:20px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll small{font:500 10px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--brown-m)}
.scroll i{display:block;position:relative;overflow:hidden;width:1px;height:58px;background:#c8142b30}
.scroll i::after{content:"";position:absolute;left:0;top:0;width:100%;height:50%;background:var(--red);animation:drip 1.8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes drip{from{transform:translateY(-100%)}to{transform:translateY(200%)}}

@media(max-width:900px){
  .sculpt{right:-26%;top:22%;width:92vw;margin-top:0;opacity:.9}
  .st-in{padding:36px 0 110px;justify-content:flex-end}
  .frame .ml.tr,.frame .ml.fig{display:none}
}
@media(prefers-reduced-motion:reduce){.in-up,.giant,.sculpt,.frame *,.mark *,#kin .kc>span,header,.scroll i::after{animation:none!important}}


/* Keep buttons clear of the sculpture and readable */
.st-bot{justify-content:flex-start}
.stage .btn.line{background:#ffffffd9}

/* ==========================================================
   HEADER (refined)
   Bigger logo + "Innovation Beyond Business" tagline, frosted bar,
   links with an animated underline, clear active-page state.
   Shared by every page that loads css/index.css, so no HTML change needed.
   ========================================================== */
:root{--hdr:88px}
html{scroll-padding-top:calc(var(--hdr) + 16px)}

header{background:#ffffffe0;-webkit-backdrop-filter:saturate(170%) blur(16px);backdrop-filter:saturate(170%) blur(16px)}
.bar{height:var(--hdr);gap:28px}

/* logo lockup: [logo] | Innovation / Beyond Business */
.brand{flex:none;align-items:center;gap:16px}
.brand img{height:62px;width:auto;display:block;border-radius:14px;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.brand:hover img{transform:rotate(-6deg) scale(1.05)}
.brand::after{content:"Innovation\A Beyond Business";white-space:pre;padding-left:16px;border-left:1.5px solid var(--line);font:600 14.5px/1.3 var(--head);letter-spacing:-.005em;color:var(--brown-m);transition:color .3s}
.brand:hover::after{color:var(--red)}

/* nav links */
nav{gap:4px}
nav a:not(.btn){position:relative;padding:10px 15px;font:500 15px var(--body);color:var(--brown);border-radius:99px;transition:color .25s}
nav a:not(.btn)::after{content:"";position:absolute;left:15px;right:15px;bottom:4px;height:2px;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
nav a:not(.btn):hover{color:var(--red)}
nav a:not(.btn):hover::after,nav a[aria-current="page"]::after{transform:scaleX(1)}
nav a[aria-current="page"]{color:var(--red)}
nav .btn{margin-left:14px;padding:13px 28px;font-size:15px}

/* hero fills the screen under the taller header */
.st-in{min-height:calc(100svh - var(--hdr))}

@media(max-width:900px){
  :root{--hdr:72px}
  .brand{gap:12px}
  .brand img{height:48px;border-radius:11px}
  .brand::after{padding-left:12px;font-size:12.5px}
  nav{gap:0}
  nav a:not(.btn){padding:15px 4px;border-radius:0;border-bottom:1px solid var(--line);font-size:17px}
  nav a:not(.btn)::after{left:4px;right:auto;width:28px;bottom:-1px}
  nav .btn{margin:14px 0 0}
}
@media(prefers-reduced-motion:reduce){
  .brand:hover img{transform:none}
}