/* ============================================================
   CH Solutions
   Palette + chamfer geometry sampled directly from the logo:
   gold #D2AA63 (the C), cream #ECDABD (the H),
   deep gold #C49D54 (where they overlap), ink #141413.
   The logo cuts its corners at 45°; every panel, button and
   field on this page does the same, on the same diagonal.
   ============================================================ */

:root{
  --ink:        #141413;
  --ink-raise:  #1C1B19;
  --ink-deep:   #0E0E0D;
  --gold:       #D2AA63;
  --gold-deep:  #C49D54;
  --cream:      #ECDABD;
  --cream-soft: rgba(236,218,189,.68);
  --cream-mute: rgba(236,218,189,.44);
  --line:       rgba(236,218,189,.13);
  --line-gold:  rgba(210,170,99,.34);

  --ch:  14px;   /* chamfer, panels  */
  --chs: 8px;    /* chamfer, small   */

  --panel:  polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
  --panel-s:polygon(var(--chs) 0, 100% 0, 100% calc(100% - var(--chs)), calc(100% - var(--chs)) 100%, 0 100%, 0 var(--chs));

  --wrap: 1180px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:"Newsreader",Georgia,serif;
  font-size:17.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.btn,.topnav,.step-n,.card-kind,.hero-meta,label,input,select,textarea,.brand span{
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}

h1,h2,h3{margin:0;letter-spacing:-.022em;line-height:1.06;font-weight:800}
p{margin:0 0 1.1rem}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--cream)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--gold);color:var(--ink-deep);padding:.7rem 1.1rem;font-weight:600;
}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}

/* ---------------- top bar ---------------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(20,20,19,.72);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:var(--wrap);margin:0 auto;
  padding:.85rem clamp(1.25rem,4vw,2.5rem);
}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--cream)}
.brand img{display:block;width:36px;height:36px;object-fit:contain}
.brand span{font-weight:600;font-size:.94rem;letter-spacing:.06em}
.topnav{display:flex;align-items:center;gap:1.6rem;font-size:.9rem;font-weight:500}
.topnav a{color:var(--cream-soft)}
.topnav a:hover{color:var(--gold)}
@media (max-width:640px){
  .topnav a:not(.btn){display:none}
  .brand span{display:none}
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-block;
  background:var(--gold);color:var(--ink-deep);
  font-weight:600;font-size:.93rem;letter-spacing:.01em;
  padding:.85rem 1.5rem;border:0;cursor:pointer;
  clip-path:var(--panel-s);
  transition:background .18s ease;
}
.btn:hover{background:var(--cream);color:var(--ink-deep)}
.btn-sm{padding:.6rem 1.05rem;font-size:.86rem}
.btn-block{width:100%;font-size:1rem;padding:1rem 1.5rem}
.btn-ghost{
  background:transparent;color:var(--cream);
  box-shadow:inset 0 0 0 1px var(--line-gold);
}
.btn-ghost:hover{background:rgba(210,170,99,.1);color:var(--gold)}

/* ---------------- hero ---------------- */
.hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media video{
  width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;
  /* the clip is blue-lit; grade it into the brand's gold */
  filter:grayscale(1) sepia(.78) saturate(2.05) hue-rotate(-6deg) contrast(1.06) brightness(.62);
}
.hero-grade{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg, var(--ink) 6%, rgba(20,20,19,.92) 34%, rgba(20,20,19,.34) 66%, rgba(20,20,19,.6) 100%),
    linear-gradient(to top, var(--ink) 2%, transparent 42%);
}

.hero-body{
  position:relative;
  max-width:var(--wrap);margin:0 auto;
  padding:clamp(4.5rem,11vw,8.5rem) clamp(1.25rem,4vw,2.5rem) clamp(4rem,9vw,7rem);
}
.hero-mark{
  display:block;width:clamp(58px,6.4vw,76px);height:auto;object-fit:contain;
  margin:0 0 2.1rem -2px;
}
.hero h1{
  font-size:clamp(2.05rem,5.7vw,4.3rem);
  max-width:15ch;
  text-wrap:balance;
  margin-bottom:1.6rem;
}
.lede{
  font-size:clamp(1.05rem,1.9vw,1.28rem);
  color:var(--cream-soft);
  max-width:52ch;line-height:1.62;
  margin-bottom:2.1rem;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.4rem}
.hero-meta{
  font-size:.83rem;letter-spacing:.05em;color:var(--cream-mute);
  margin:0;font-weight:500;
}

/* one orchestrated entrance, hero only */
.hero-mark,.hero h1,.lede,.hero-actions,.hero-meta{
  animation:rise .8s cubic-bezier(.2,.7,.3,1) both;
}
.hero h1{animation-delay:.07s}
.lede{animation-delay:.14s}
.hero-actions{animation-delay:.21s}
.hero-meta{animation-delay:.28s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .hero-mark,.hero h1,.lede,.hero-actions,.hero-meta{animation:none}
}

/* ---------------- bands ---------------- */
.band{padding:clamp(3.75rem,8vw,6.5rem) 0}
.band-alt{background:var(--ink-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.sec-head{margin-bottom:clamp(2.25rem,4vw,3.25rem);max-width:60ch}
.sec-head h2{font-size:clamp(1.75rem,3.6vw,2.6rem);margin-bottom:.85rem}
.sec-head h2::after{
  content:"";display:block;width:56px;height:3px;
  background:var(--gold);margin-top:1.1rem;
  clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%);
}
.sec-head p{color:var(--cream-soft);margin:0;font-size:1.06rem}

/* ---------------- cards ---------------- */
.card{background:var(--line-gold);padding:1px;clip-path:var(--panel)}
.card-in{background:var(--ink-raise);clip-path:var(--panel);padding:clamp(1.6rem,3vw,2.2rem);height:100%}
.band-alt .card-in{background:var(--ink)}

.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem}

.card h3{font-size:1.4rem;margin-bottom:.4rem}
.card-kind{
  font-size:.78rem;letter-spacing:.11em;font-weight:600;
  color:var(--gold);margin-bottom:1rem;
}
.card-copy{color:var(--cream-soft);margin-bottom:1.25rem}
.feat{list-style:none;margin:0 0 1.5rem;padding:0}
.feat li{
  position:relative;padding-left:1.15rem;margin-bottom:.42rem;
  color:var(--cream-soft);font-size:1rem;
}
.feat li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;background:var(--gold-deep);
  clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%);
}
.card-links{display:flex;flex-wrap:wrap;gap:1.25rem;font-size:.93rem;font-weight:500}
.card-links a{border-bottom:1px solid var(--line-gold);padding-bottom:2px}
.card-links a:hover{border-color:var(--cream)}

/* ---------------- definition list ---------------- */
.defs{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:0}
.defs > div{padding:1.7rem 0;border-top:1px solid var(--line)}
@media (min-width:640px){
  .defs{column-gap:3.5rem}
}
.defs dt{
  font-family:"Archivo",sans-serif;font-weight:600;font-size:1.08rem;
  color:var(--cream);margin-bottom:.5rem;
}
.defs dd{margin:0;color:var(--cream-soft);max-width:46ch}

/* ---------------- steps (a real sequence) ---------------- */
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2.4rem;
}
.steps li{position:relative;padding-top:1.4rem;border-top:1px solid var(--line-gold)}
.step-n{
  display:inline-block;font-weight:800;font-size:.8rem;
  color:var(--ink-deep);background:var(--gold);
  padding:.2rem .55rem;margin-bottom:.9rem;
  clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px);
}
.steps h3{font-size:1.22rem;margin-bottom:.55rem}
.steps p{color:var(--cream-soft);margin:0;font-size:1rem}

/* ---------------- pricing ---------------- */
.price-block{max-width:760px}
.price-card h2{font-size:clamp(1.6rem,3vw,2.15rem);margin-bottom:1.2rem}
.price-card p{color:var(--cream-soft);max-width:60ch}
.price-card .btn{margin-top:.6rem}

/* ---------------- contact ---------------- */
.contact-grid{
  display:grid;gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .contact-grid{grid-template-columns:.85fr 1.15fr;align-items:start}
}
.contact-copy h2{font-size:clamp(1.75rem,3.6vw,2.6rem);margin-bottom:1rem}
.contact-copy p{color:var(--cream-soft);max-width:42ch}
.contact-alt{font-size:.97rem}

.field{margin-bottom:1.15rem}
label{
  display:block;font-size:.83rem;font-weight:600;letter-spacing:.04em;
  color:var(--cream-soft);margin-bottom:.45rem;
}
input,select,textarea{
  width:100%;
  background:var(--ink-deep);
  color:var(--cream);
  border:1px solid var(--line);
  padding:.8rem .9rem;
  font-size:.98rem;font-family:"Archivo",sans-serif;
  clip-path:var(--panel-s);
  transition:border-color .16s ease;
}
.band .form-card input,.band .form-card select,.band .form-card textarea{background:#0B0B0A}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
textarea{resize:vertical;min-height:120px;font-family:"Newsreader",Georgia,serif;line-height:1.6}
select{appearance:none;cursor:pointer}

.field.err input,.field.err select,.field.err textarea{border-color:#C9553D}

.form-note{
  margin:.9rem 0 0;font-size:.9rem;min-height:1.2em;
  font-family:"Archivo",sans-serif;color:var(--cream-soft);
}
.form-note.ok{color:var(--gold)}
.form-note.bad{color:#E0836C}

/* ---------------- footer ---------------- */
.foot{border-top:1px solid var(--line);padding:2.5rem 0;background:var(--ink-deep)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.foot-in img{opacity:.85}
.foot-in p{margin:0;font-size:.9rem;color:var(--cream-mute)}
.foot-c{margin-left:auto !important}

/* On narrow screens the clip's subject sits under the copy — deepen the veil */
@media (max-width:760px){
  .hero-grade{
    background:
      linear-gradient(to right, var(--ink) 0%, rgba(20,20,19,.90) 52%, rgba(20,20,19,.74) 100%),
      linear-gradient(to top, var(--ink) 2%, transparent 46%);
  }
}

/* ---------------- language toggle ---------------- */
.topnav .lang{
  font-size:.86rem;letter-spacing:.03em;
  padding-bottom:2px;border-bottom:1px solid var(--line-gold);
}
.topnav .lang:hover{color:var(--gold);border-color:var(--gold)}
@media (max-width:640px){
  .topnav .lang{display:inline-block !important}
}
/* Studio redesign */
:root{--ink:#151715;--ink-deep:#10120f;--ink-raise:#1c201b;--cream:#f0eee6;--cream-soft:#b9bcb2;--cream-mute:#999e91;--gold:#dcc18e;--line:rgba(235,237,218,.14);--wrap:1320px}
body{font-family:Archivo,Arial,sans-serif;font-size:15px;line-height:1.75}
h1,h2,h3{letter-spacing:-.045em}h2 em,h1 em{font-family:Newsreader,Georgia,serif;font-weight:400;color:var(--gold)}
section[id]{scroll-margin-top:95px}.topbar{background:rgba(21,23,21,.93)}.topbar-in{padding-top:20px;padding-bottom:20px}.brand span{letter-spacing:-.03em;font-size:1.15rem}.topnav{font-size:.8rem}.topnav .btn{color:var(--ink)}
.btn{clip-path:none;border-radius:5px;padding:14px 22px;font-size:.85rem;transition:transform .2s,background .2s;display:inline-flex;align-items:center;justify-content:center;gap:25px}.btn:hover{transform:translateY(-2px)}.btn-sm{padding:10px 18px}.btn:disabled{opacity:.6;cursor:wait;transform:none}.text-link{color:var(--cream);font-size:.85rem;padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:22px}
.hero{background:radial-gradient(ellipse at 80% 45%,#32352555,transparent 55%)}.hero-layout{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;min-height:740px;gap:25px}.hero-body{padding:80px 0 85px;margin:0;max-width:none}.eyebrow{font:500 10px/1.7 Archivo,sans-serif;letter-spacing:.18em;color:var(--gold);margin-bottom:25px}.eyebrow>span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:9px;box-shadow:0 0 15px #dcc18e88}.hero h1{font-size:clamp(3rem,5.2vw,4.75rem);max-width:none;line-height:1.06;font-weight:500;margin-bottom:25px;letter-spacing:-.055em}.hero h1 em{white-space:nowrap}.lede{font-size:14px;max-width:43ch;line-height:1.85;margin-bottom:28px}.hero-actions{gap:25px;align-items:center;margin-bottom:35px}.hero-meta{font-size:9px;letter-spacing:.13em;color:var(--cream-mute)}
.product-scene{height:590px;position:relative;perspective:1300px;font-family:Archivo,sans-serif}.orbit{position:absolute;border:1px solid #dcc18e19;border-radius:50%;width:530px;height:530px;top:25px;left:0}.orbit-two{width:420px;height:420px;left:55px;top:80px}.scene-cross{position:absolute;color:#dcc18e70;font:24px Georgia}.cross-one{top:36px;left:70px}.cross-two{bottom:35px;right:25px}.dashboard{position:absolute;top:135px;left:0;width:440px;height:303px;border:1px solid #d8c7a63d;border-radius:12px;background:linear-gradient(130deg,#30342b,#1b211b);box-shadow:0 35px 60px #0007;transform:rotateY(-12deg) rotateZ(-7deg);animation:dashboard-float 9s ease-in-out infinite}.window-bar{display:flex;align-items:center;gap:5px;padding:12px 15px;border-bottom:1px solid var(--line)}.window-bar i{width:5px;height:5px;background:#858d77;border-radius:50%}.window-bar span{margin-left:auto;font-size:7px;letter-spacing:.15em;color:#a2aa94}.dash-content{display:flex;padding:20px 15px;gap:18px}.dash-sidebar{width:26px;border-right:1px solid var(--line);padding-right:10px}.dash-sidebar b{font-size:10px;color:var(--gold)}.dash-sidebar i{display:block;width:9px;height:9px;border:1px solid #8c977d;margin-top:20px;border-radius:2px}.dash-main{flex:1}.dash-main small{font-size:6px;letter-spacing:.1em;color:#c1c6b4}.dash-main h3{font-size:19px;font-weight:500;margin:8px 0 15px}.dash-stats{display:flex;gap:30px}.dash-stats strong{display:block;font-size:13px;font-weight:500;color:var(--gold)}.chart{height:88px;display:flex;align-items:end;gap:8px;margin-top:10px;border-bottom:1px solid #b6c19644}.chart i{flex:1;background:linear-gradient(#d9be83,#687854);height:30%;border-radius:3px 3px 0 0;transform-origin:bottom;animation:chart-grow 5s ease-in-out infinite alternate}.chart i:nth-child(3n){height:55%;animation-delay:-2s}.chart i:nth-child(3n + 1){height:42%;animation-delay:-1s}.chart i:nth-child(n+7){height:72%}.chart i:nth-child(n+10){height:94%}.dash-rule{height:3px;background:#ffffff10;width:65%;margin-top:10px}.dash-rule.short{width:40%;margin-top:5px}.phone{position:absolute;right:8px;top:68px;width:208px;height:425px;background:#e9e9de;color:#252e22;border:6px solid #34392e;border-radius:32px;box-shadow:10px 30px 70px #0008,inset 0 0 0 1px #fff8;transform:rotate(9deg);padding:17px 15px;animation:phone-float 8s ease-in-out infinite}.phone-camera{position:absolute;top:9px;left:70px;width:58px;height:13px;border-radius:20px;background:#252b23}.phone-top{font-size:7px;display:flex;justify-content:space-between;margin-bottom:24px}.phone-logo{background:#20251e;border-radius:10px;width:34px;height:34px;display:grid;place-items:center;margin-bottom:20px}.phone-logo img{width:24px}.phone>small{font-size:6px;letter-spacing:.08em}.phone h3{font-size:28px;font-weight:500;line-height:1.06;margin-top:6px}.phone-art{position:relative;height:122px;margin:14px 0;overflow:hidden;border-radius:7px;background:#d4d8c7}.phone-art div{position:absolute;width:90px;height:90px;border-radius:22px;background:linear-gradient(135deg,#b5be9c,#596b41);transform:rotate(-30deg);left:45px;top:40px;box-shadow:8px 10px 15px #23361544}.phone-art div:nth-child(2){top:15px;background:linear-gradient(135deg,#dbc795,#a79970)}.phone-art div:nth-child(3){top:-10px;background:linear-gradient(135deg,#f0e5c4,#bcb389)}.phone-row{font-size:7px;display:flex;justify-content:space-between;align-items:center}.phone-row b{font-size:16px}.phone-nav{font-size:16px;border-top:1px solid #253a2422;display:flex;justify-content:space-around;margin-top:12px;padding-top:7px}.floating-tag{position:absolute;bottom:66px;left:38px;background:#2b3228;border:1px solid #b9c69840;border-radius:8px;padding:15px 19px;display:flex;align-items:center;gap:13px;box-shadow:0 15px 30px #0004;transform:rotate(-3deg);font-size:11px}.floating-tag>span{color:var(--gold);border:1px solid #dcc18e55;border-radius:50%;width:28px;height:28px;text-align:center;line-height:28px}.floating-tag small{display:block;font-size:9px;color:#abb4a0}.scene-caption{position:absolute;bottom:8px;left:90px;font-size:8px;letter-spacing:.2em;color:var(--cream-mute)}.motion-toggle{position:absolute;bottom:14px;right:25px;background:transparent;color:var(--cream-mute);border:0;font:10px Archivo;cursor:pointer;padding:8px}.motion-toggle:hover{color:var(--gold)}
@keyframes dashboard-float{50%{transform:translateY(-12px) rotateY(-8deg) rotateZ(-5deg)}}@keyframes phone-float{50%{transform:translateY(10px) rotate(6deg)}}@keyframes chart-grow{from{transform:scaleY(.7)}to{transform:scaleY(1)}}.motion-paused .product-scene *{animation-play-state:paused!important}
.proof-strip{border-bottom:1px solid var(--line);background:#191c17}.proof-strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:25px;padding-bottom:25px}.proof-strip span{font-size:8px;letter-spacing:.15em;color:var(--cream-mute)}.proof-strip p{font-size:12px;margin:0}.proof-strip i{color:var(--gold);font-style:normal;font-size:20px}
.band{padding:100px 0}.sec-head{max-width:680px;margin-bottom:42px}.sec-head .eyebrow{margin-bottom:16px}.sec-head h2{font-size:clamp(2rem,3.6vw,3.2rem);font-weight:500;line-height:1.15}.sec-head h2::after{display:none}.sec-head p:not(.eyebrow){font-size:14px;max-width:55ch}.grid-2{gap:30px}.card,.card-in{clip-path:none;border-radius:10px}.grid-2 .card{background:transparent;padding:0}.grid-2 .card-in{background:transparent;padding:0}.project-art{height:310px;border:1px solid var(--line);border-radius:9px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:26px;background:radial-gradient(ellipse at 60% 40%,#4e4964,#22212b 70%)}.project-art:before,.project-art:after{content:'';position:absolute;width:290px;height:290px;border:1px solid #d3c9f41c;transform:rotate(-25deg);border-radius:50px}.project-art:after{width:380px;height:380px;transform:rotate(-25deg)}.project-art.gym{background:radial-gradient(ellipse at 60% 40%,#46583b,#20291f 70%)}.project-index{position:absolute;top:20px;left:22px;font-size:8px;letter-spacing:.15em;color:#ffffff99}.project-symbol{width:65px;height:65px;background:#d0c0ec;color:#292135;border-radius:16px;display:grid;place-items:center;font-size:40px;line-height:1;margin-bottom:20px;box-shadow:0 10px 30px #0004}.gym .project-symbol{background:#d1e69e;color:#27301f}.project-art strong{font-size:26px;letter-spacing:-.03em;font-weight:500;z-index:1}.project-art small{font-size:7px;letter-spacing:.2em;color:#ffffff99;margin-top:6px}.art-caption{position:absolute;bottom:13px;right:16px;font-size:8px;color:#ffffff88}.card h3{font-size:23px;font-weight:500}.card-kind{font-size:9px;margin-top:8px}.card-copy{font-size:14px}.feat{display:flex;flex-wrap:wrap;gap:7px}.feat li{font-size:10px;padding:5px 10px;border:1px solid var(--line);border-radius:4px;margin:0}.feat li:before{display:none}.card-links{font:500 11px Archivo;gap:25px}.card-links a:after{content:' ↗'}.defs{counter-reset:service;gap:0 55px}.defs>div{counter-increment:service;padding:28px 0}.defs dt:before{content:'0' counter(service);display:block;font-size:10px;color:var(--gold);margin-bottom:14px}.defs dt{font-size:20px;font-weight:500;letter-spacing:-.03em}.defs dd{font-size:13px}.steps{gap:40px}.step-n{clip-path:none;background:transparent;color:var(--gold);font-size:32px;font-family:Newsreader;margin:8px 0 18px;padding:0;font-weight:400}.steps h3{font-size:22px;font-weight:500}.steps p{font-size:13px}.price-block{max-width:none}.price-card{background:transparent}.price-card .card-in{padding:0;background:transparent;display:grid;grid-template-columns:1fr 1fr;gap:15px 60px}.price-card h2{font-size:40px;font-weight:500;grid-row:span 2}.price-card p{font-size:13px;margin:0}.price-card .btn{grid-column:2;justify-self:start}.contact-copy h2{font-size:clamp(2.5rem,4vw,3.8rem);font-weight:500;line-height:1.1}.contact-copy p{font-size:14px}.contact-copy .eyebrow{font-size:10px}.form-card{background:var(--line)}.form-card .card-in{padding:30px}.form-card .card-in{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{margin:0;min-width:0}.field:has(textarea),.form-card button,.form-note,.privacy-note{grid-column:1/-1}label{font-size:10px;letter-spacing:0}input,select,textarea{clip-path:none;border-radius:5px;font-size:12px;font-family:Archivo,sans-serif;padding:13px}select{appearance:auto}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}textarea{font-family:Archivo,sans-serif}.privacy-note{font-size:10px;color:var(--cream-mute);margin:0}.form-note{font-size:12px;margin:0}.foot-in p{font-size:11px}.foot{padding:30px 0}
@media(min-width:1400px){.hero-layout{min-height:780px}}
@media(max-width:1050px){.hero-layout{gap:0;grid-template-columns:1.1fr 1fr}.product-scene{transform:scale(.83);transform-origin:left center;width:490px;margin-right:-80px}.hero h1{font-size:clamp(2.7rem,5vw,4rem)}}
@media(max-width:760px){.hero-layout{grid-template-columns:1fr}.hero-body{padding:60px 0 20px}.hero h1{font-size:clamp(2.7rem,8.5vw,4.3rem)}.lede{max-width:48ch}.product-scene{width:490px;max-width:none;transform:scale(.86);transform-origin:top center;margin:0 auto;height:510px;left:0}.hero-layout{overflow:hidden}.hero-meta{font-size:8px}.proof-strip .wrap{flex-wrap:wrap;justify-content:center;gap:12px 20px}.proof-strip span{width:100%;text-align:center}.proof-strip p{font-size:10px}.proof-strip i{font-size:14px}.band{padding:65px 0}.price-card .card-in{display:block}.price-card p{margin-bottom:20px}.price-card h2{font-size:32px}.topnav{gap:18px}.topbar-in{padding-top:14px;padding-bottom:14px}.brand span{display:inline;font-size:14px}.brand img{width:28px;height:28px}.btn-sm{font-size:10px;padding:9px 12px}.defs{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr;gap:45px}.project-art{height:285px}.foot-c{margin-left:0!important}}
@media(max-width:500px){.product-scene{left:50%;margin-left:-245px;transform:scale(.69);height:415px}.hero-actions{gap:18px}.hero-actions .btn{font-size:12px;padding:13px 17px;gap:14px}.text-link{font-size:11px;gap:10px}.topnav .lang{font-size:10px}.topnav{gap:12px}.brand span{font-size:12px}.form-card .card-in{padding:22px;grid-template-columns:1fr}.hero h1 em{white-space:normal}.proof-strip i{display:none}.contact-copy h2{font-size:42px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-toggle{display:none}}

/* Allow the benefit-led headline to wrap naturally in both languages. */
.hero h1{font-size:clamp(2.6rem,4.25vw,3.9rem);max-width:18ch;line-height:1.09;text-wrap:balance}.hero h1 em{white-space:normal}
@media(max-width:760px){.hero h1{font-size:clamp(2.5rem,7.7vw,3.8rem);max-width:20ch}}

/* Neutral charcoal palette and purposeful interaction. */
:root {
  --ink: #151515;
  --ink-deep: #101010;
  --ink-raise: #202020;
  --cream: #f1eee8;
  --cream-soft: #bcb9b4;
  --cream-mute: #a39f98;
  --line: rgba(240,235,225,.14);
}
.topbar { background: rgba(21,21,21,.94); }
.hero { background: radial-gradient(ellipse at 80% 45%,#33302b55,transparent 55%); }
.proof-strip { background: #1b1b1b; }
.dashboard { background: linear-gradient(130deg,#333230,#202020); }
.window-bar i { background: #92908a; }
.window-bar span,.dash-main small,.floating-tag small { color: #bbb6ae; }
.dash-sidebar { width: 33px; }
.dash-sidebar i { border-color: #928b7e; }
.chart { border-color: #b7a88b44; }
.chart i { background: linear-gradient(#d9be83,#796c54); }
.phone { background: #eae7df; color: #292725; border-color: #393735; }
.phone-camera,.phone-logo { background: #252423; }
.phone-art { background: #d9d4ca; }
.phone-art div { background: linear-gradient(135deg,#b9b2a4,#71685a); box-shadow: 8px 10px 15px #30271e44; }
.phone-nav { border-color: #39322b22; }
.floating-tag { background: #2d2b29; border-color: #c5b99d40; }
.project-art.gym { background: radial-gradient(ellipse at 60% 40%,#51483a,#262320 70%); }
.gym .project-symbol { background: #dcc18e; color: #30291f; }

/* Each reveal runs once. No script means all content is visible. */
.motion-enabled .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease var(--reveal-delay,0ms), transform .65s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms);
}
.motion-enabled .reveal.is-visible,
.motion-enabled .reveal:focus-within { opacity: 1; transform: none; }
.motion-enabled .reveal .project-art { clip-path: inset(0 0 12% 0 round 9px); transition: clip-path .8s cubic-bezier(.2,.7,.2,1); }
.motion-enabled .reveal.is-visible .project-art { clip-path: inset(0 round 9px); }
.motion-enabled .dashboard { translate: 0 var(--scroll-depth,0px); }
.motion-enabled .phone { translate: 0 var(--scroll-counter,0px); }
.motion-enabled .orbit-two { translate: 0 var(--scroll-counter,0px); }

.btn { transition: background .2s, transform .35s cubic-bezier(.2,.9,.25,1.5), translate .18s ease, box-shadow .25s; }
.btn:active:not(:disabled) { transform: scale(.965); box-shadow: inset 0 2px 6px #0002; }
.text-link span,.card-links a::after { display: inline-block; transition: transform .25s ease; }
.text-link { transition: color .2s,border-color .2s; }
.card-links a { transition: color .2s,border-color .2s; }
.project-symbol,.project-art strong,.project-art::before,.project-art::after { transition: transform .65s cubic-bezier(.2,.7,.2,1); }
@media (hover:hover) and (pointer:fine) {
  .motion-enabled .grid-2 .card:hover .project-symbol { transform: translateY(-5px) scale(1.08); }
  .motion-enabled .grid-2 .card:hover .project-art strong { transform: translateY(-2px); }
  .motion-enabled .grid-2 .card:hover .project-art::before { transform: rotate(-18deg) scale(1.06); }
  .motion-enabled .grid-2 .card:hover .project-art::after { transform: rotate(-30deg) scale(1.06); }
  .motion-enabled .text-link:hover span { transform: translateY(3px); }
  .motion-enabled .card-links a:hover::after { transform: translate(3px,-3px); }
  .text-link:hover { border-color: var(--gold); }
}
@media (min-width:1000px) {
  .process-band > .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
  .process-band .sec-head { position: sticky; top: 150px; }
  .process-band .steps { display: block; position: relative; padding-left: 35px; }
  .process-band .steps::before { content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: var(--line); }
  .process-band .steps::after { content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: var(--gold); transform: scaleY(var(--process-progress,1)); transform-origin: top; }
  .process-band .steps li { min-height: 285px; padding: 20px 0 60px; transition: transform .35s,border-color .35s; }
  .process-band .steps li:last-child { padding-bottom: 20px; }
  .motion-enabled .steps .step-current { transform: translateX(8px); border-color: var(--gold); }
  .motion-enabled .step-current h3 { color: var(--gold); }
}
#submitBtn[data-state='sending']::before { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: send-spin .7s linear infinite; }
#submitBtn[data-state='sent'] { background: var(--cream); box-shadow: inset 0 0 0 2px var(--gold); }
#submitBtn[data-state='error'] { box-shadow: inset 0 0 0 2px #a44e3d; }
@keyframes send-spin { to { transform: rotate(360deg); } }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused!important; transition: none!important; }
.motion-paused .reveal { opacity: 1; transform: none; }
.motion-paused .btn { translate: none!important; }
.motion-paused .btn:hover,.motion-paused .btn:active { transform: none; }
@media(prefers-reduced-motion:reduce) {
  .reveal { opacity: 1!important; transform: none!important; }
  .dashboard,.phone,.orbit-two,.btn { translate: none!important; }
  .btn:hover,.btn:active { transform: none!important; }
  .process-band .sec-head { position: static; }
}
@media print {
  .reveal { opacity: 1!important; transform: none!important; }
  .project-art { clip-path: none!important; }
}
/* Editorial refinement: readable type, practical product example, clear hierarchy. */
body { font-size:17px; line-height:1.7; }
:root { --cream-soft:#c8c4be; --cream-mute:#aaa59e; }
.topbar-in { min-height:84px; }
.topnav { font-size:14px; gap:26px; }
.topnav .lang { font-size:13px; }
.btn { font-size:15px; min-height:48px; padding:13px 22px; }
.btn-sm { font-size:14px; }
.eyebrow { font-size:11px; letter-spacing:.13em; }
.hero-layout { min-height:710px; grid-template-columns:1fr 1.05fr; gap:38px; }
.hero-body { padding:64px 0 74px; }
.hero h1 { font-size:clamp(2.7rem,4.1vw,3.8rem); max-width:18ch; line-height:1.08; }
.lede { font-size:17px; line-height:1.7; max-width:43ch; margin-bottom:26px; }
.hero-actions { gap:24px; margin-bottom:24px; }
.text-link { font-size:14px; }
.hero-meta { font-size:10px; letter-spacing:.1em; }
.proof-strip p { font-size:14px; }
.proof-strip span { font-size:10px; }
.band { padding:86px 0; }
.sec-head { margin-bottom:40px; }
.sec-head h2 { font-size:clamp(2rem,3.5vw,3rem); line-height:1.15; }
.sec-head p:not(.eyebrow) { font-size:17px; }
#work { background:#1b1b1b; }
.card h3 { font-size:26px; }
.card-kind { font-size:12px; letter-spacing:.06em; }
.card-copy { font-size:16px; line-height:1.75; }
.feat li { font-size:12px; padding:5px 11px; }
.card-links { font-size:14px; gap:24px; }
.card-links a { padding:10px 0; }
.project-art { height:330px; }
.project-art small { font-size:10px; }
.project-index,.art-caption { font-size:10px; }
.defs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 65px; }
.defs dt { font-size:23px; line-height:1.3; }
.defs dd { font-size:16px; line-height:1.75; max-width:50ch; }
.defs dt::before { font-size:12px; }
.steps h3 { font-size:25px; }
.steps p { font-size:16px; line-height:1.75; }
.process-band .steps li { min-height:230px; padding-bottom:35px; }
.process-band > .wrap { gap:65px; }
.pricing-note { background:#202020; border-top:1px solid var(--line); padding:40px 0; }
.pricing-note .wrap { display:grid; grid-template-columns:1fr 1.3fr; gap:60px; align-items:center; }
.pricing-note h2 { font-size:26px; font-weight:500; line-height:1.3; max-width:20ch; }
.pricing-note p { font-size:16px; color:var(--cream-soft); margin:0; }

/* A useful, explicitly illustrative owner/member workflow. */
.business-example { margin:0; height:550px; width:100%; transform:none; }
.scene-stage { position:relative; height:510px; }
.business-example .orbit { width:430px; height:430px; top:30px; left:40px; }
.business-example .dashboard { top:80px; left:0; width:440px; height:auto; min-height:320px; transform:rotate(-4deg); animation:owner-float 10s ease-in-out infinite; }
.business-example .window-bar { padding:13px 17px; }
.business-example .window-bar span { font-size:9px; letter-spacing:.08em; }
.business-example .window-bar .workspace-brand { margin-left:0; margin-right:auto; color:var(--gold); }
.owner-view { padding:24px 22px 18px; }
.view-label { font-size:9px; letter-spacing:.1em; color:var(--gold); font-weight:600; }
.owner-view h3 { font-size:25px; font-weight:500; margin-top:8px; }
.owner-view>p { font-size:11px; color:var(--cream-soft); margin:8px 0 23px; }
.schedule-head { display:flex; justify-content:space-between; font-size:8px; color:var(--cream-mute); letter-spacing:.08em; padding-bottom:9px; border-bottom:1px solid var(--line); }
.schedule-row { display:flex; align-items:center; gap:13px; padding:12px 0; border-bottom:1px solid var(--line); }
.schedule-row time { font-size:11px; color:var(--gold); }
.schedule-row div { flex:1; }
.schedule-row b { display:block; font-size:12px; font-weight:500; }
.schedule-row small { display:block; font-size:9px; color:var(--cream-soft); }
.schedule-row>span { font-size:11px; color:var(--cream-soft); }
.schedule-foot { font-size:9px; color:var(--cream-soft); padding-top:14px; }
.status-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--gold); margin-right:6px; }
.business-example .phone { top:25px; right:-5px; width:205px; height:425px; padding:16px 14px; transform:rotate(6deg); animation:member-float 9s ease-in-out infinite; }
.business-example .phone-top { margin-bottom:25px; }
.business-example .phone .view-label { color:#6f5940; font-size:8px; }
.business-example .phone h3 { font-size:27px; margin:8px 0 18px; }
.workout-day { font-size:7px; letter-spacing:.04em; margin-bottom:9px; }
.workout-summary { background:#dcd4c4; border-radius:7px; padding:10px; }
.workout-summary strong { display:block; font-size:13px; }
.workout-summary>span { display:block; font-size:8px; }
.workout-summary small { font-size:8px; }
.workout-progress { height:3px; background:#beb5a2; margin:8px 0 1px; }
.workout-progress i { display:block; width:25%; height:100%; background:#57452c; }
.exercise { display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid #0001; }
.exercise>span { width:18px; font-size:9px; color:#6b5941; }
.exercise b { display:block; font-size:10px; font-weight:500; }
.exercise small { display:block; font-size:8px; }
.example-action { font-size:9px; text-align:center; background:#292725; color:#f5eee0; border-radius:5px; padding:8px; margin-top:11px; }
.business-example figcaption { position:relative; font-size:11px; line-height:1.6; color:var(--cream-mute); text-align:center; padding:0 15px; }
@keyframes owner-float { 50% { transform:translateY(-7px) rotate(-3deg); } }
@keyframes member-float { 50% { transform:translateY(6px) rotate(4deg); } }

/* A calm, welcoming destination after the portfolio. */
#contact { background:#eee9df; color:#242321; --gold:#705328; --cream:#242321; --cream-soft:#56514b; --cream-mute:#625c54; --line:#c9c1b4; }
#contact .contact-copy h2 { font-size:clamp(2.5rem,4.3vw,3.8rem); line-height:1.13; }
#contact .contact-copy p { font-size:17px; }
#contact .contact-copy .eyebrow { font-size:11px; }
.contact-promise { padding:20px 0; border-top:1px solid #c9c1b4; border-bottom:1px solid #c9c1b4; font-size:15px!important; line-height:1.9; margin:26px 0; }
#contact .contact-alt { font-size:15px; }
#contact a { color:#6a4b21; text-decoration:underline; text-underline-offset:4px; }
#contact a:hover { color:#29231c; }
#contact .form-card { background:transparent; border:0; }
#contact .form-card .card-in { background:#faf8f3; border:1px solid #d6cec1; padding:32px; gap:21px 18px; }
#contact label { font-size:14px; color:#37332e; letter-spacing:0; }
.optional { color:#6c6357; font-size:12px; font-weight:400; }
#contact input,#contact select,#contact textarea { background:#fffdf9; border:1px solid #b9b0a1; color:#242321; font-size:16px; padding:12px 13px; min-height:48px; }
#contact textarea { min-height:135px; }
#contact textarea::placeholder { color:#776f64; }
#contact .btn { background:#252421; color:#fff9ee; border-radius:4px; min-height:52px; }
#contact .btn:hover { background:#463b2a; }
#contact .form-note { font-size:14px; }
#contact .form-note.ok { color:#4b512d; }
#contact .form-note.bad { color:#992e22; }
#contact .field.err input,#contact .field.err select,#contact .field.err textarea { border-color:#b43d2d; }
#contact .privacy-note { font-size:12px; color:#655e54; }
.form-context { grid-column:1/-1; margin:0; padding-top:6px; font-size:13px; color:#655e54; border-top:1px solid #d6cec1; }
#contact #submitBtn[data-state='sent'] { background:#e4dac5; color:#30291e; }
.foot-in p { font-size:13px; }
.mobile-menu { display:none; }
@media (max-width:1100px) and (min-width:901px) {
  .business-example { transform:scale(.85); transform-origin:left center; width:500px; margin-right:-75px; }
  .hero-layout { gap:15px; }
}
@media (max-width:900px) {
  .topbar-in { min-height:70px; padding:12px 20px; gap:14px; }
  .brand span { font-size:16px; display:inline; }
  .brand img { width:30px; height:30px; }
  .topnav { margin-left:auto; }
  .topnav a:not(.lang) { display:none; }
  .topnav .lang { display:inline-block; font-size:13px; padding:8px 0; }
  .mobile-menu { display:block; }
  .mobile-menu summary { list-style:none; cursor:pointer; font:500 14px Archivo,sans-serif; padding:10px 0 10px 12px; color:var(--cream); }
  .mobile-menu summary::-webkit-details-marker { display:none; }
  .mobile-menu summary span { margin-left:7px; }
  .mobile-menu nav { position:absolute; left:0; right:0; top:100%; padding:18px 24px 25px; background:#1d1c1b; border-bottom:1px solid var(--line-gold); box-shadow:0 20px 30px #0005; display:grid; }
  .mobile-menu nav a { color:#eee9df; font-size:19px; padding:13px 0; border-bottom:1px solid var(--line); }
  .mobile-menu nav a:last-child { color:#dcc18e; border:0; }
  .hero-layout { grid-template-columns:1fr; gap:0; min-height:0; overflow:hidden; }
  .hero-body { padding:42px 0 20px; }
  .hero h1 { font-size:clamp(2.35rem,6vw,3.5rem); max-width:24ch; margin-bottom:20px; }
  .lede { font-size:16px; max-width:54ch; line-height:1.65; margin-bottom:22px; }
  .hero-actions { margin-bottom:18px; gap:20px; }
  .hero-actions .btn { font-size:14px; padding:12px 17px; }
  .hero-meta { font-size:9px; }
  .hero .eyebrow { margin-bottom:17px; font-size:10px; }
  .business-example { width:520px; max-width:none; height:425px; left:50%; margin:0 0 0 -260px; transform:scale(.82); transform-origin:top center; }
  .business-example figcaption { font-size:13px; }
  .scene-stage { height:460px; }
  .motion-toggle { bottom:5px; right:12px; font-size:11px; }
  .band { padding:60px 0; }
  .proof-strip .wrap { padding-top:18px; padding-bottom:18px; flex-wrap:wrap; justify-content:center; }
  .proof-strip span { width:100%; text-align:center; }
  .defs { column-gap:30px; }
  .pricing-note .wrap { grid-template-columns:1fr; gap:16px; }
  .pricing-note h2 { max-width:none; }
  .contact-grid { gap:30px; }
}
@media(max-width:540px) {
  .topbar-in { gap:10px; }
  .brand span { font-size:14px; }
  .brand img { width:26px; height:26px; }
  .topnav .lang { font-size:12px; }
  .mobile-menu summary { font-size:12px; padding-left:0; }
  .hero-body { padding-top:30px; }
  .hero h1 { font-size:36px; line-height:1.09; max-width:20ch; }
  .hero-actions { gap:14px; }
  .text-link { font-size:13px; gap:8px; }
  .business-example { transform:scale(.64); height:325px; }
  .business-example figcaption { font-size:15px; }
  .hero-meta { letter-spacing:.04em; }
  .proof-strip p { font-size:12px; }
  .defs { grid-template-columns:1fr; }
  .defs dt { font-size:22px; }
  .project-art { height:255px; }
  .sec-head h2 { font-size:32px; }
  .sec-head p:not(.eyebrow) { font-size:16px; }
  .card-links { font-size:13px; gap:18px; }
  #contact .form-card .card-in { padding:22px 18px; grid-template-columns:1fr; }
  #contact .contact-copy h2 { font-size:40px; }
  .form-context { font-size:12px; }
  .foot-in { gap:12px; }
}
@media(max-width:360px) {
  .hero h1 { font-size:32px; }
  .hero-actions { align-items:stretch; flex-direction:column; gap:4px; }
  .hero-actions .text-link { align-self:flex-start; }
  .business-example { transform:scale(.56); height:290px; }
}
@media(max-width:999px) { .process-band .steps li { min-height:0; padding-bottom:0; } }
/* Keep the complete example workflow inside the device frame. */
.business-example .phone { height:480px; }
.business-example .phone h3 { margin-bottom:12px; }
.business-example .exercise { padding:6px 0; }
@media(max-width:900px) { .business-example { height:470px; } .business-example .scene-stage { height:520px; } }
@media(max-width:540px) { .business-example { height:365px; } }
@media(max-width:360px) { .business-example { height:320px; } }
/* Explicit heading hierarchy; override paragraph colors on section labels. */
.sec-head .eyebrow,
#contact .contact-copy .eyebrow { color: var(--gold); }
.sec-head h2, .pricing-note h2 { color: var(--cream); }

/* Privacy and utility pages use the same quiet, readable visual language. */
.legal-page { max-width:780px; padding:80px 24px; margin:auto; }
.legal-page h1 { font-size:clamp(36px,7vw,64px); margin:24px 0; }
.legal-page h2 { color:var(--gold); font-size:24px; margin-top:32px; }
.legal-page p { line-height:1.75; color:var(--cream-soft); }
.legal-page a, .privacy-note a { text-decoration:underline; text-underline-offset:4px; }
.privacy-controls { position:fixed; bottom:16px; right:16px; left:16px; max-width:570px; margin-left:auto; padding:22px; z-index:100; background:#242321; color:#f1eee8; border:1px solid #dcc18e; box-shadow:0 8px 40px #0007; }
.privacy-controls[hidden] { display:none; }
.privacy-controls p { margin:0 0 16px; line-height:1.5; }
.privacy-controls button, .privacy-settings { font:inherit; cursor:pointer; }
.privacy-controls button { padding:10px 16px; margin:4px; border:1px solid #dcc18e; background:#242321; color:#f1eee8; border-radius:4px; }
.privacy-settings { background:none; border:0; padding:0; color:inherit; text-decoration:underline; }
.bot-field { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
/* Inside Channel TV — real product showcase. */
.work-showcase { grid-template-columns:1fr; gap:64px; }
.channel-case { --channel-accent:#fa8b36; overflow:hidden; border:1px solid #ffffff16; border-radius:16px; background:#191817; }
.channel-intro { padding:42px 42px 34px; display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:start; }
.channel-brand { display:flex; align-items:center; gap:18px; }
.channel-brand img { border-radius:17px; flex:none; }
.channel-brand .eyebrow { color:var(--channel-accent); font-size:11px; margin:0 0 8px; }
.channel-brand h3 { font-size:24px; font-weight:500; letter-spacing:-.035em; margin:0; }
.channel-platform { color:var(--cream-mute); font-size:13px; margin:7px 0 0; }
.channel-story h4 { font-size:clamp(28px,3vw,40px); line-height:1.14; letter-spacing:-.045em; font-weight:500; margin:0 0 16px; }
.channel-story p { font-size:16px; line-height:1.7; color:var(--cream-soft); margin:0; max-width:50ch; }
.channel-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; padding:40px 42px 24px; background:radial-gradient(ellipse at 50% 85%,#9f481b29,transparent 65%),#111110; border-block:1px solid #ffffff0d; align-items:start; }
.channel-screen { margin:0; min-width:0; }
.channel-screen:nth-child(even) { padding-top:30px; }
.screen-open { display:block; width:100%; padding:6px; border:1px solid #ffffff35; border-radius:25px; background:linear-gradient(135deg,#3b3834,#121212 40%,#514236); position:relative; cursor:zoom-in; box-shadow:0 14px 28px #0006; transition:transform .25s ease,border-color .25s ease; }
.screen-window { display:block; position:relative; overflow:hidden; border-radius:19px; aspect-ratio:1116 / 2310; background:#000; }
.screen-window img { display:block; width:100%; height:auto; margin-top:-7%; }
.screen-zoom { position:absolute; right:12px; bottom:12px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#f1eee8; color:#181818; font-size:18px; box-shadow:0 2px 10px #0008; }
.screen-open:focus-visible { outline:3px solid var(--gold); outline-offset:5px; }
.channel-screen figcaption { color:var(--cream); font-size:14px; padding-top:18px; }
.channel-screen figcaption span { color:var(--channel-accent); font-size:11px; margin-right:8px; }
.channel-bottom { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:22px 42px; }
.channel-hint { color:var(--cream-mute); font-size:13px; margin:0; }
.channel-bottom .card-links { margin:0; font-size:14px; flex:none; }
.channel-quote { margin:0; padding:32px 42px 38px; border-top:1px solid #ffffff14; display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:center; }
.channel-quote blockquote { margin:0; font-family:Newsreader,Georgia,serif; font-size:clamp(24px,2.5vw,32px); line-height:1.4; color:var(--cream); }
.channel-quote figcaption { border-left:2px solid var(--channel-accent); padding-left:20px; }
.channel-quote strong,.channel-quote figcaption span { display:block; font-size:14px; }
.channel-quote figcaption span { color:var(--cream-mute); margin-top:6px; }
.work-showcase > .card > .card-in { display:grid; grid-template-columns:1fr 1fr; column-gap:40px; align-content:center; }
.work-showcase > .card .project-art { grid-row:1 / 6; height:100%; min-height:310px; margin:0; }
.screen-dialog { max-width:min(620px,94vw); max-height:94dvh; width:620px; padding:0; border:1px solid #ffffff40; border-radius:12px; background:#151515; color:#f1eee8; overscroll-behavior:contain; }
.screen-dialog::backdrop { background:#000d; backdrop-filter:blur(8px); }
.screen-dialog-bar { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; background:#202020; z-index:1; }
.screen-dialog-bar p { font-size:14px; margin:0; }
.screen-close { color:#fff; background:none; border:1px solid #777; padding:9px 14px; border-radius:6px; font:inherit; white-space:nowrap; cursor:pointer; }
.screen-full { display:block; width:100%; height:auto; }
.screen-viewing { overflow:hidden; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .screen-open:hover { transform:translateY(-7px); border-color:var(--channel-accent); } }
@media(max-width:900px) {
 .channel-intro { grid-template-columns:1fr; gap:26px; padding:30px; }
 .channel-story h4 br { display:none; }
 .channel-gallery { padding:30px; gap:16px; }
 .channel-bottom { flex-direction:column; align-items:flex-start; padding:24px 30px; }
 .channel-quote { padding:28px 30px; }
}
@media(max-width:600px) {
 .channel-intro { padding:24px 20px; }
 .channel-brand h3 { font-size:22px; }
 .channel-brand img { width:52px; height:52px; border-radius:14px; }
 .channel-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); padding:26px 18px; gap:24px 16px; }
 .channel-screen:nth-child(even) { padding-top:20px; }
 .screen-open { padding:4px; border-radius:18px; }
 .screen-window { border-radius:14px; }
 .channel-screen figcaption { font-size:13px; padding-top:12px; }
 .channel-bottom { padding:22px 20px; }
 .channel-quote { grid-template-columns:1fr; padding:26px 20px; gap:22px; }
 .work-showcase > .card > .card-in { display:block; }
 .work-showcase > .card .project-art { height:255px; min-height:0; margin-bottom:24px; }
}
@media(prefers-reduced-motion:reduce) { .screen-open { transition:none; } }

/* Sports Gym shares the gallery layout with its own brand accent. */
.gym-case { --channel-accent:#efb742; scroll-margin-top:110px; }
.gym-case .channel-gallery { --channel-accent:#51b99b; background:radial-gradient(ellipse at 50% 85%,#174c3b80,transparent 70%),#101613; }
.gym-case .screen-open { background:linear-gradient(135deg,#31453c,#101713 40%,#234536); }
.gym-case .screen-open:focus-visible { outline-color:var(--channel-accent); }
.gym-case .channel-quote blockquote { font-size:clamp(22px,2.2vw,29px); }

/* A personal introduction, using the established typography and palette. */
.about-band { padding:72px 0; background:var(--ink-deep); border-block:1px solid var(--line); }
.about-layout { display:grid; grid-template-columns:1fr 1.3fr; gap:64px; align-items:start; }
.about-band .eyebrow { color:var(--gold); margin:0 0 20px; }
.about-band h2 { color:var(--cream); font-size:clamp(32px,3.6vw,48px); font-weight:500; letter-spacing:-.04em; line-height:1.15; margin:0; }
.about-copy p { color:var(--cream-soft); font-size:17px; line-height:1.8; margin:0; max-width:62ch; }
.about-copy .about-closing { font-family:Newsreader,Georgia,serif; font-size:25px; line-height:1.45; color:var(--cream); margin-top:24px; }
@media(max-width:760px) { .about-band { padding:48px 0; } .about-layout { grid-template-columns:1fr; gap:26px; } }

.confirmation-dialog { box-sizing:border-box; width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; margin:auto; padding:40px; border:1px solid var(--gold); border-radius:14px; background:var(--ink); color:var(--cream); box-shadow:0 24px 90px #0008; }
.confirmation-dialog::backdrop { background:#000b; backdrop-filter:blur(5px); }
.confirmation-check { display:grid; place-items:center; width:52px; height:52px; border:1px solid var(--gold); color:var(--gold); border-radius:50%; font-size:28px; margin-bottom:26px; }
.confirmation-dialog .eyebrow { color:var(--gold); margin:0 0 12px; }
.confirmation-dialog h2 { font-size:32px; line-height:1.2; font-weight:500; margin:0 0 18px; }
.confirmation-dialog #confirmation-description { font-size:17px; line-height:1.65; color:var(--cream-soft); margin:0 0 28px; }
.confirmation-close { width:100%; min-height:48px; padding:12px 20px; background:var(--gold); color:var(--ink); border:1px solid var(--gold); border-radius:5px; font:600 16px Archivo,sans-serif; cursor:pointer; }
.confirmation-close:hover { background:var(--cream); }
.confirmation-close:active { transform:translateY(1px); }
.confirmation-close:focus-visible { outline:2px solid var(--cream); outline-offset:4px; }
html.enquiry-confirmed { overflow:hidden; }
@media(max-width:540px) { .confirmation-dialog { padding:28px 24px; } .confirmation-dialog h2 { font-size:28px; } }