/* ==========================================================================
   Syneron site.css v2 (redesign 2026-09-17)
   Tokens D51/D58/D59 · scene + grain + mesh · type-as-hero · concentric radii
   ========================================================================== */

:root{
  /* --- palette (DoD D51) --- */
  --bg-deep:#0B1F17;
  --bg-deep-2:#10291F;
  --glow-amber:#F5A524;
  --amber-deep:#C97F06;      /* decorative fills only */
  --amber-text:#8F5803;      /* amber as TEXT on cream: AA at 5.23:1 */
  --cream:#F6F1E7;
  --cream-2:#EDE4D3;
  --ink:#14201B;
  --ink-muted:#4C5B53;      /* AA on cream and cream-2 at 14 px */
  --mist:#DCE6DF;
  --on-dark:#F4F1EA;
  --on-dark-muted:#A9B8AF;
  --teal:#1E6F52;

  /* legacy aliases so the other 7 pages keep rendering under the new shell */
  --paper:var(--cream);
  --paper-2:var(--cream-2);
  --ink-soft:#3A4A42;
  --muted:var(--ink-muted);
  --line:var(--mist);
  --green:var(--bg-deep);
  --green-deep:#071711;
  --on-green:var(--on-dark);
  --on-green-soft:var(--on-dark-muted);
  --amber:var(--glow-amber);
  --amber-hover:#FFB937;
  --brick:#A6482C;

  --font-display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --font-body:"Atkinson Hyperlegible Next","Segoe UI",system-ui,sans-serif;

  --step--1:clamp(.86rem,.83rem + .14vw,.94rem);
  --step-0:clamp(1.04rem,1rem + .22vw,1.16rem);
  --step-1:clamp(1.24rem,1.14rem + .5vw,1.5rem);
  --step-2:clamp(1.6rem,1.35rem + 1.15vw,2.35rem);
  --step-3:clamp(2.1rem,1.6rem + 2.3vw,3.5rem);
  --step-4:clamp(2.75rem,1.85rem + 4.3vw,5.2rem);

  --gutter:clamp(1.15rem,.6rem + 2.4vw,2.5rem);
  --max:74rem;
  --r-sm:8px; --r-md:14px; --r-lg:22px;   /* concentric: outer = inner + padding */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.22,1,.36,1);

  --dev-w:300;   /* rendered width of the laptop screen, unitless px */
  --ph-w:214;    /* rendered width of the phone screen, unitless px */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-body);font-size:var(--step-0);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto}
img{outline:1px solid rgb(0 0 0/.1);outline-offset:-1px}
.scene img{outline-color:rgb(255 255 255/.1)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.05;letter-spacing:-.022em;margin:0;text-wrap:balance}
h3{font-weight:700}
p{margin:0}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
b,strong{font-weight:700}
:where(button,a,summary,input,textarea):focus-visible{outline:3px solid var(--glow-amber);outline-offset:3px;border-radius:var(--r-sm)}
.scene :where(a,button,summary):focus-visible{outline-color:var(--glow-amber)}
.skip{position:absolute;left:-9999px;top:0;background:var(--glow-amber);color:var(--ink);padding:.7rem 1.1rem;z-index:100;border-radius:0 0 var(--r-sm) 0;font-weight:700}
.skip:focus{left:0}
.wrap{width:min(100% - var(--gutter)*2,var(--max));margin-inline:auto}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* cross-document page morph (0 KB) */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}

/* ==========================================================================
   1. SCENE: mesh gradient + grain (dark sections only)
   ========================================================================== */
.scene{position:relative;isolation:isolate;background:var(--bg-deep);color:var(--on-dark);overflow:hidden}
.scene::before{
  content:"";position:absolute;inset:-18%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 42% at 18% 16%,color-mix(in srgb,var(--teal) 62%,transparent),transparent 68%),
    radial-gradient(42% 46% at 86% 84%,color-mix(in srgb,var(--glow-amber) 26%,transparent),transparent 66%),
    radial-gradient(52% 55% at 52% 44%,var(--bg-deep-2),transparent 70%);
  filter:blur(58px);opacity:.92;
  animation:mesh 68s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes mesh{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.07)}
  100%{transform:translate3d(-2%,2.5%,0) scale(1.03)}
}
.scene::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px 120px;
}
@media (prefers-reduced-motion:reduce){.scene::before{animation:none}}

/* ==========================================================================
   2. HEADER (glass surface #1 of 2)
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg-deep) 74%,transparent);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid rgb(255 255 255/.08);
  color:var(--on-dark);
}
.site-header .wrap{display:flex;align-items:center;gap:clamp(.7rem,2vw,1.6rem);min-height:4.25rem}
.lockup{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit;margin-right:auto}
.lockup .mk{width:34px;height:34px;border-radius:9px;flex:none;display:block}
.lockup .txt{display:flex;flex-direction:column;line-height:1}
.lockup .word{font-family:var(--font-display);font-weight:800;font-size:1.22rem;letter-spacing:-.03em}
.lockup .word i{font-style:normal;color:var(--glow-amber)}
.lockup .by{font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:#CFDCD3;margin-top:.22rem}
.nav{display:flex;align-items:center;gap:clamp(.4rem,1.4vw,1.35rem)}
.nav>a:not(.btn){
  position:relative;text-decoration:none;font-size:var(--step--1);font-weight:600;
  color:var(--on-dark-muted);padding:.45rem .2rem;transition:color .18s var(--ease);
}
.nav>a:not(.btn)::after{
  content:"";position:absolute;left:.2rem;right:.2rem;bottom:.18rem;height:2px;border-radius:2px;
  background:var(--glow-amber);transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav>a:not(.btn):hover,.nav>a:not(.btn)[aria-current]{color:var(--on-dark)}
.nav>a:not(.btn):hover::after,.nav>a:not(.btn)[aria-current]::after{transform:scaleX(1)}
.menu-btn{display:none}

/* mobile menu, @starting-style entry, no JS beyond a checkbox-free <details> */
@media (max-width:860px){
  .nav .hide-sm{display:none}
  .site-header .wrap{gap:.6rem}
  .menu{position:relative}
  .menu-btn{
    display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
    border:1px solid rgb(255 255 255/.16);border-radius:var(--r-sm);background:transparent;
    color:var(--on-dark);cursor:pointer;padding:0;
  }
  .menu-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
  .menu-panel{
    position:absolute;right:0;top:calc(100% + .6rem);min-width:13rem;
    background:color-mix(in srgb,var(--bg-deep) 96%,transparent);
    border:1px solid rgb(255 255 255/.12);border-radius:var(--r-md);
    padding:.45rem;display:none;flex-direction:column;
    box-shadow:0 18px 40px -18px rgb(0 0 0/.8);
  }
  .menu[open] .menu-panel{display:flex;animation:pop .22s var(--ease-out)}
  @starting-style{.menu[open] .menu-panel{opacity:0;transform:translateY(-6px)}}
  .menu-panel a{
    text-decoration:none;padding:.6rem .7rem;border-radius:var(--r-sm);
    font-size:var(--step--1);font-weight:600;color:var(--on-dark);
  }
  .menu-panel a:hover{background:rgb(255 255 255/.07)}
}
@media (min-width:861px){.menu{display:none}}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ==========================================================================
   3. BUTTONS (press 0.96, lift 150-200ms, exact easing)
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;font-size:var(--step--1);
  padding:.92rem 1.5rem;border-radius:var(--r-md);text-decoration:none;border:1px solid transparent;
  cursor:pointer;line-height:1.2;text-align:center;
  transition-property:transform,box-shadow,background-color,border-color,color;
  transition-duration:.18s;transition-timing-function:cubic-bezier(.2,.8,.2,1);
}
.btn svg{width:1.1em;height:1.1em;flex:none;margin-top:-.06em}   /* optical, not geometric */
.btn-amber{background:var(--glow-amber);color:#231704;box-shadow:0 1px 0 rgb(255 255 255/.28) inset,0 10px 24px -12px rgb(245 165 36/.8)}
.btn-amber:hover{background:#FFB937;transform:translateY(-2px);box-shadow:0 1px 0 rgb(255 255 255/.3) inset,0 16px 30px -12px rgb(245 165 36/.85)}
.btn-ink{background:var(--bg-deep);color:var(--on-dark)}
.btn-ink:hover{background:#163126;transform:translateY(-2px);box-shadow:0 14px 26px -14px rgb(11 31 23/.7)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--mist)}
.btn-line:hover{border-color:var(--ink);transform:translateY(-2px)}
.scene .btn-line,.btn-ghost{background:transparent;color:var(--on-dark);border-color:rgb(255 255 255/.24)}
.scene .btn-line:hover,.btn-ghost:hover{border-color:var(--glow-amber);color:var(--glow-amber);transform:translateY(-2px)}
.btn-sm{padding:.58rem 1rem;border-radius:var(--r-sm);font-size:.83rem;min-height:44px}
.btn:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover,.btn:active{transform:none;transition-duration:.01ms}}

/* ==========================================================================
   4. SECTION SHELLS
   ========================================================================== */
.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.section-tight{padding-block:clamp(2.4rem,5vw,3.6rem)}
.alt{background:var(--cream-2)}
.section.dark,.dark{background:var(--bg-deep);color:var(--on-dark)}
.kicker{
  font-family:var(--font-display);font-weight:700;font-size:.74rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--amber-text);margin-bottom:.9rem;
}
.scene .kicker,.dark .kicker{color:var(--glow-amber)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
.narrow{max-width:20ch}
.lead{font-size:var(--step-1);line-height:1.5;color:var(--ink-soft);max-width:62ch}
.scene .lead,.dark .lead{color:var(--on-dark-muted)}
.sec-head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head p{margin-top:1rem}

/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero{padding-block:clamp(3rem,7vw,5.5rem) clamp(3.5rem,8vw,6rem)}
.hero .wrap{display:grid;gap:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:1080px){
  .hero .wrap{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,4vw,4rem)}
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;font-size:.74rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--glow-amber);margin-bottom:1.35rem;
}
.eyebrow::before{content:"";width:1.6rem;height:2px;background:var(--glow-amber);border-radius:2px}
.hero h1{
  font-size:var(--step-4);line-height:.95;letter-spacing:-.025em;font-weight:800;
  margin-bottom:1.9rem;max-width:14ch;
}
.hero h1 .l2{color:var(--glow-amber);display:block}
.hero h1 .w,.page-head h1 .w,.mini h1 .w{display:inline-block}
.anim :is(.hero,.page-head,.mini) h1 .w{
  animation:hero-word .7s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:calc(var(--i,0) * 70ms);
}
@keyframes hero-word{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
.hero .lead{max-width:48ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero-proof{
  display:flex;flex-wrap:wrap;gap:.5rem 1.15rem;margin-top:1.6rem;
  font-size:.86rem;color:var(--on-dark-muted);
}
.hero-proof li{display:flex;align-items:center;gap:.45rem}
.hero-proof li::before{
  content:"";width:15px;height:15px;flex:none;border-radius:50%;
  background:color-mix(in srgb,var(--glow-amber) 22%,transparent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--glow-amber) 62%,transparent);
}

/* ---- device: laptop + overlapping phone -------------------------------- */
.device{position:relative;display:grid;justify-items:center;gap:1.1rem}
.laptop{
  position:relative;width:calc(var(--dev-w) * 1px);max-width:100%;
  border-radius:calc(var(--r-lg) + 4px);padding:10px 10px 0;
  background:linear-gradient(180deg,#22352C,#16251E);
  box-shadow:0 2px 0 rgb(255 255 255/.07) inset,0 40px 70px -32px rgb(0 0 0/.85);
  border:1px solid rgb(255 255 255/.1);
}
.laptop::after{  /* the base, drawn as one tapered bar */
  content:"";display:block;height:11px;margin:9px -5.5% 0;border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#2B4136,#16251E);
  box-shadow:0 12px 22px -12px rgb(0 0 0/.9);
}
.laptop::before{
  content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);
  width:44px;height:3px;border-radius:2px;background:rgb(255 255 255/.14);
}
.stage{
  position:relative;width:100%;aspect-ratio:1280/800;overflow:hidden;
  border-radius:16px;background:#0D1712;   /* laptop 26px outer - 10px padding */
}
.phone{
  position:absolute;right:-2%;bottom:-6%;z-index:3;
  width:calc(var(--ph-w) * 1px + 16px);padding:8px;
  border-radius:calc(var(--r-lg) + 8px);
  background:linear-gradient(180deg,#22352C,#141F1A);
  border:1px solid rgb(255 255 255/.12);
  box-shadow:0 30px 55px -26px rgb(0 0 0/.9);
}
.phone .stage{aspect-ratio:390/720;border-radius:var(--r-lg)}
.phone::before{
  content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:4;
  width:34%;height:14px;border-radius:0 0 10px 10px;background:#141F1A;
}
.screen{position:absolute;inset:0;opacity:0;will-change:opacity}
.screen.is-on{opacity:1;z-index:3}
/* Motion only when the page is actually animating. Without .anim the class
   toggle lands instantly on a correct, fully opaque state. The outgoing screen
   waits for the incoming one to cover it, so no frame stacks two translucent
   screens. */
.anim .screen{
  transform:translateX(26px);
  transition:opacity .55s cubic-bezier(.2,.8,.2,1) .55s,transform 0s linear .55s;
}
.anim .screen.is-on{
  transform:none;
  transition:opacity .55s cubic-bezier(.2,.8,.2,1) 0s,transform .6s cubic-bezier(.2,.8,.2,1) 0s;
}
.anim .phone .screen{transition-delay:.85s}          /* the phone lags 300 ms */
.anim .phone .screen.is-on{transition-delay:.3s}
.screen .fit{transform-origin:top left;width:1280px;height:800px}
.stage .fit{transform:scale(calc(var(--dev-w) / 1280))}
.phone .fit{width:390px;height:720px;transform:scale(calc(var(--ph-w) / 390))}
.dots{display:flex;gap:.55rem;align-items:center;justify-content:center;flex-wrap:wrap}
.dots button{
  appearance:none;border:0;cursor:pointer;padding:.42rem .82rem;border-radius:999px;position:relative;
  background:rgb(255 255 255/.07);color:var(--on-dark-muted);
  font-family:var(--font-display);font-weight:700;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  transition-property:background-color,color;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,.8,.2,1);
}
/* the pill stays small, the finger target is 44 px */
.dots button::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.dots button:hover{background:rgb(255 255 255/.13);color:var(--on-dark)}
.dots button[aria-pressed="true"]{background:var(--glow-amber);color:#231704}
.device-note{font-size:.8rem;color:var(--on-dark-muted);text-align:center;max-width:36ch}

@media (max-width:719px){
  .laptop{display:none}
  .device{gap:.9rem}
  .phone{position:static;width:calc(var(--ph-w) * 1px + 16px);margin-inline:auto}
}
@media (min-width:720px){
  :root{--dev-w:520;--ph-w:150}
  .dots{margin-top:1.4rem}
  .dots,.device-note{margin-right:calc(var(--ph-w) * 1.05px)}   /* clear the overlapping phone */
}
@media (min-width:900px){:root{--dev-w:640;--ph-w:178}}
@media (min-width:1080px){:root{--dev-w:500;--ph-w:148}}
@media (min-width:1240px){:root{--dev-w:590;--ph-w:168}}
@media (max-width:719px){:root{--ph-w:250}}

/* ==========================================================================
   6. PRICES
   ========================================================================== */
.badges{display:flex;flex-wrap:wrap;gap:.5rem .7rem;margin-bottom:1.6rem}
.badges li{
  font-size:.79rem;font-weight:700;font-family:var(--font-display);
  padding:.34rem .8rem;border-radius:999px;background:var(--cream-2);
  border:1px solid var(--mist);color:var(--ink-soft);
}
.alt .badges li{background:var(--cream)}
.plans{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));align-items:start}
/* at tablet width auto-fit gives 2 columns and leaves the 1.199 card orphaned on
   half a row. One snapped row keeps the ladder intact and the 599 card primary. */
@media (min-width:700px) and (max-width:1023px){
  .plans{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(16.5rem,1fr);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    /* overflow-x:auto forces overflow-y to auto as well, so the "Recomandat" tag
       (top:-.72rem) and the elevated card's shadow get clipped at the edges.
       The padding gives both room; scroll-padding keeps the snap aligned. */
    padding:1.05rem .7rem 1.3rem;scroll-padding-inline:.7rem;
  }
  .plans>.plan{scroll-snap-align:start}
  .plan.featured::before{left:1.85rem;right:1.85rem}
}
.plan{
  position:relative;background:var(--cream-2);border:1px solid var(--mist);
  border-radius:var(--r-lg);padding:1.6rem;display:flex;flex-direction:column;gap:.85rem;
  transition-property:transform,box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(.2,.8,.2,1);
}
.alt .plan{background:var(--cream)}
.plan:hover{transform:translateY(-2px)}
.plan h3{font-size:var(--step-1)}
.plan .for{font-size:.88rem;color:var(--ink-muted);min-height:2.6em}
.plan .amount{
  font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,5vw,3.4rem);
  line-height:1;letter-spacing:-.04em;display:flex;align-items:baseline;gap:.45rem;
  font-variant-numeric:tabular-nums;
}
.plan .amount small{font-size:.8rem;font-weight:700;letter-spacing:0;color:var(--ink-muted);font-family:var(--font-body)}
.plan ul{display:grid;gap:.5rem;font-size:.9rem;line-height:1.5}
.plan li{position:relative;padding-left:1.5rem;color:var(--ink-soft)}
.plan li::before{
  content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;border-radius:2px;
  background:var(--amber-deep);opacity:.7;
}
.plan li.plus{font-weight:700;color:var(--ink)}
.plan li.plus::before{border-radius:50%;opacity:1}
.plan .btn{margin-top:auto;width:100%}
/* elevated card: glass surface #2 of 2 */
.plan.featured{
  background:color-mix(in srgb,#FDFBF5 72%,var(--cream));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-color:color-mix(in srgb,var(--glow-amber) 45%,var(--mist));
  box-shadow:0 26px 48px -26px rgb(20 32 27/.42),0 2px 10px -4px rgb(20 32 27/.14);
  padding:1.85rem;border-radius:calc(var(--r-lg) + 4px);
}
.plan.featured::before{
  content:"";position:absolute;left:1.85rem;right:1.85rem;top:-1px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--glow-amber),var(--amber-deep));
}
.plan .flag{
  position:absolute;top:-.72rem;right:1.3rem;
  background:var(--glow-amber);color:#231704;font-family:var(--font-display);font-weight:800;
  font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;padding:.3rem .7rem;border-radius:var(--r-sm);
}
.plans-more{margin-top:1.5rem;font-size:.95rem}
.plans-more a{color:var(--amber-text);font-weight:700;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px}

/* ==========================================================================
   7. ARCHETYPE GALLERY (bento)
   ========================================================================== */
.gallery{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:760px){
  .gallery{grid-template-columns:repeat(6,1fr)}
  .gallery>li:nth-child(1),.gallery>li:nth-child(2){grid-column:span 3}
  .gallery>li:nth-child(3),.gallery>li:nth-child(4){grid-column:span 3}
}
@media (min-width:1080px){
  .gallery>li:nth-child(1){grid-column:span 4}
  .gallery>li:nth-child(2){grid-column:span 2}
  .gallery>li:nth-child(3){grid-column:span 2}
  .gallery>li:nth-child(4){grid-column:span 4}
}
.gcard{
  position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--mist);
  background:var(--cream-2);height:100%;display:flex;flex-direction:column;
  transition-property:transform,box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(.2,.8,.2,1);
}
.gcard:hover{transform:translateY(-2px);box-shadow:0 22px 40px -26px rgb(20 32 27/.45)}
.gcard .shot{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--bg-deep-2)}
/* in the bento the cards share a row, so the art fills the row instead of
   keeping its own ratio and leaving a ragged gap under the shorter card */
@media (min-width:760px){
  .gcard{display:grid;grid-template-rows:1fr auto}
  .gcard .shot{aspect-ratio:auto;min-height:230px}
}
.gcard .shot img{width:100%;height:100%;object-fit:cover;display:block;outline:0}
.gcard .mini{
  position:absolute;right:4%;bottom:-2px;width:36%;max-width:150px;z-index:2;
  border-radius:10px 10px 0 0;padding:5px 5px 0;background:#1B2C24;
  border:1px solid rgb(255 255 255/.14);border-bottom:0;
  box-shadow:0 16px 30px -16px rgb(0 0 0/.85);
}
.gcard .mini .stage{aspect-ratio:390/560;border-radius:5px}
.gcard .mini .fit{width:390px;height:560px;transform:scale(calc(var(--mini-w,132) / 390));transform-origin:top left}
.gcard .meta{padding:1.15rem 1.25rem 1.3rem;display:grid;gap:.35rem}
.gcard h3{font-size:var(--step-1)}
.gcard .trades{font-size:.85rem;color:var(--ink-muted)}
.gal-note{margin-top:1.3rem;font-size:.9rem;color:var(--ink-muted);max-width:56ch}

/* ==========================================================================
   8. STEPS
   ========================================================================== */
.steps{display:grid;gap:1.4rem;counter-reset:s;grid-template-columns:1fr}
@media (min-width:640px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{position:relative;padding-top:1.4rem;border-top:2px solid var(--mist)}
.steps li::before{
  counter-increment:s;content:"0" counter(s);
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.4rem,4.5vw,3.4rem);line-height:.9;letter-spacing:-.05em;
  color:var(--amber-deep);opacity:.42;margin-bottom:.5rem;font-variant-numeric:tabular-nums;
}
.steps h3{margin-bottom:.5rem}
.steps p{color:var(--ink-soft);font-size:.96rem}
.dark .steps li,.scene .steps li{border-top-color:rgb(255 255 255/.16)}
.dark .steps li::before,.scene .steps li::before{color:var(--glow-amber);opacity:.45}
.dark .steps p,.scene .steps p{color:var(--on-dark-muted)}

/* ==========================================================================
   9. BENTO "ce primești"
   ========================================================================== */
.bento{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:700px){.bento{grid-template-columns:repeat(6,1fr)}.bento>li{grid-column:span 3}}
@media (min-width:1000px){
  .bento>li{grid-column:span 2}
  .bento>li:nth-child(1){grid-column:span 4}
  .bento>li:nth-child(6){grid-column:span 6}          /* closes the row, no orphan gap */
  .bento>li:nth-child(6) .cell{grid-template-columns:auto 1fr;column-gap:2rem;padding:1.8rem 2rem}
  .bento>li:nth-child(6) .ic{grid-row:1/3;align-self:center;width:32px;height:32px}
  .bento>li:nth-child(6) h3{grid-column:2;align-self:end}
  .bento>li:nth-child(6) p{grid-column:2;align-self:start;max-width:70ch}
}
.cell{
  height:100%;background:var(--cream-2);border:1px solid var(--mist);border-radius:var(--r-lg);
  padding:1.5rem;display:grid;gap:.6rem;align-content:start;
  transition-property:transform,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.2,.8,.2,1);
}
.alt .cell{background:var(--cream)}
.cell:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--amber-deep) 40%,var(--mist))}
.cell .ic{width:26px;height:26px;stroke:var(--amber-deep);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cell h3{font-size:var(--step-1)}
.cell p{font-size:.94rem;color:var(--ink-soft)}
.cell .tier-note{font-size:.8rem;color:var(--ink-muted);font-style:italic}

/* ==========================================================================
   10. FAQ
   ========================================================================== */
.faq{display:grid;gap:.6rem;max-width:52rem}
.faq details{border:1px solid var(--mist);border-radius:var(--r-md);background:var(--cream-2);overflow:hidden}
.alt .faq details{background:var(--cream)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.05rem 3rem 1.05rem 1.25rem;position:relative;
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.25rem;top:50%;width:11px;height:11px;
  border-right:2px solid var(--amber-deep);border-bottom:2px solid var(--amber-deep);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq .answer{padding:0 1.25rem 1.25rem;color:var(--ink-soft);font-size:.96rem}
.faq details[open] .answer{animation:reveal .22s cubic-bezier(.22,1,.36,1)}
@starting-style{.faq details[open] .answer{opacity:0;transform:translateY(-4px)}}
@keyframes reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.faq details[open] .answer{animation:none}}

/* ==========================================================================
   11. CTA + FOOTER
   ========================================================================== */
.cta{padding-block:clamp(3.5rem,8vw,6rem)}
.cta .wrap{display:grid;gap:2rem;align-items:center}
@media (min-width:860px){.cta .wrap{grid-template-columns:1.25fr auto}}
.cta h2{font-size:var(--step-3);max-width:21ch}
.nb{white-space:nowrap}
.cta p{margin-top:1rem;color:var(--on-dark-muted);max-width:52ch}
.cta .actions{display:flex;flex-wrap:wrap;gap:.8rem}
.site-footer{background:var(--green-deep);color:var(--on-dark-muted);padding-block:clamp(2.5rem,5vw,3.5rem);font-size:.92rem}
.site-footer .wrap{display:grid;gap:2rem}
@media (min-width:760px){.site-footer .wrap{grid-template-columns:1.6fr 1fr 1fr}}
.site-footer a{text-decoration:none;color:inherit}
.site-footer a:hover{color:var(--glow-amber)}
.site-footer ul{display:grid;gap:.5rem;align-content:start}
.site-footer .lockup{color:var(--on-dark);margin:0}
.site-footer .bottom{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;justify-content:space-between;
  border-top:1px solid rgb(255 255 255/.1);padding-top:1.3rem;font-size:.82rem;
}

/* ==========================================================================
   12. MOTION layer 1 — scroll-driven reveals, 0 KB JS
   ========================================================================== */
/* `.rise` / `.reveal` carry NO hidden state of their own: the base rule is the
   final state and only `.anim` introduces the animation. */
.anim .rise{opacity:0;transform:translateY(14px);animation:riseIn .6s cubic-bezier(.22,1,.36,1) forwards}
.anim .d1{animation-delay:.09s}.anim .d2{animation-delay:.18s}
.anim .d3{animation-delay:.27s}.anim .d4{animation-delay:.36s}
@keyframes riseIn{to{opacity:1;transform:none}}
@keyframes riseUp{from{transform:translateY(18px)}to{transform:none}}
@supports (animation-timeline:view()){
  .anim .reveal{
    transform:translateY(18px);
    animation:riseUp .01s linear both;
    animation-timeline:view();
    animation-range:entry 4% cover 26%;
  }
}
@supports not (animation-timeline:view()){
  .anim .reveal{transform:translateY(18px);animation:riseUp .6s cubic-bezier(.22,1,.36,1) .05s forwards}
}
@media (prefers-reduced-motion:reduce){
  .rise,.reveal,.anim .rise,.anim .reveal{opacity:1;transform:none;animation:none}
  .hero h1 .w,.anim :is(.hero,.page-head,.mini) h1 .w{animation:none}
  .screen,.screen.is-on,.anim .screen,.anim .screen.is-on{transition:none;transform:none}
}

/* ==========================================================================
   13. LEGACY: the other 7 pages keep working under the new shell
   ========================================================================== */
.page-head{padding-block:clamp(3rem,7vw,5rem) clamp(1.5rem,3vw,2.5rem)}
.page-head.scene{padding-block:clamp(3.2rem,7vw,5.5rem) clamp(3rem,6vw,4.5rem)}
.page-head.scene .lead{max-width:56ch}
.page-head .meta{color:var(--on-dark-muted);font-size:.88rem}
.page-head h1{font-size:var(--step-3);max-width:20ch}
.page-head .lead{margin-top:1.2rem}
.tiers{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));align-items:start}
.tier{
  position:relative;background:var(--cream-2);border:1px solid var(--mist);border-radius:var(--r-lg);
  padding:1.6rem;display:flex;flex-direction:column;gap:.8rem;
}
.tier.featured{
  background:color-mix(in srgb,#FDFBF5 72%,var(--cream));
  border-color:color-mix(in srgb,var(--glow-amber) 45%,var(--mist));
  box-shadow:0 26px 48px -26px rgb(20 32 27/.42);padding:1.85rem;
}
.tier .flag{
  position:absolute;top:-.72rem;right:1.3rem;background:var(--glow-amber);color:#231704;
  font-family:var(--font-display);font-weight:800;font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;padding:.3rem .7rem;border-radius:var(--r-sm);
}
.tier h2{font-size:var(--step-2)}
.tier .for{font-size:.88rem;color:var(--ink-muted)}
.tier .price{
  font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,4.6vw,3.2rem);line-height:1;
  letter-spacing:-.04em;display:flex;align-items:baseline;gap:.4rem;font-variant-numeric:tabular-nums;
}
.tier .price small{font-size:.78rem;font-weight:700;letter-spacing:0;color:var(--ink-muted);font-family:var(--font-body)}
.tier .price-note{font-size:.82rem;color:var(--ink-muted)}
.tier ul{display:grid;gap:.5rem;font-size:.9rem;line-height:1.5}
.tier li{position:relative;padding-left:1.5rem;color:var(--ink-soft)}
.tier li::before{content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;border-radius:2px;background:var(--amber-deep);opacity:.7}
.tier li.plus{font-weight:700;color:var(--ink)}
.tier li.plus::before{border-radius:50%;opacity:1}
.tier .btn{margin-top:auto;width:100%}
.fineprint{margin-top:1.6rem;font-size:.84rem;color:var(--ink-muted);max-width:70ch}
.always{display:grid;gap:1rem;margin-top:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.always p{background:var(--cream);border:1px solid var(--mist);border-radius:var(--r-md);padding:1.1rem;font-size:.92rem;color:var(--ink-soft)}
.always b{display:block;font-family:var(--font-display);color:var(--ink);margin-bottom:.35rem}
.ledger{display:grid;gap:0;margin-top:1.5rem}
.ledger-row{display:grid;gap:.4rem;padding:1.4rem 0;border-top:1px solid var(--mist)}
@media (min-width:820px){.ledger-row{grid-template-columns:15rem 1fr;gap:2rem}}
.ledger-row p{color:var(--ink-soft);font-size:.96rem}
.timeline{display:grid;gap:.9rem}
.timeline li{display:grid;gap:.2rem;padding-left:1.4rem;border-left:1px solid var(--mist);padding-bottom:.4rem}
.timeline b{font-family:var(--font-display);font-size:.88rem;color:var(--amber-text)}
.timeline span{color:var(--ink-soft);font-size:.95rem}
.story{display:grid;gap:2rem}
@media (min-width:900px){.story{grid-template-columns:1fr 1.2fr;gap:3rem}}
.takeover{display:grid;gap:1.4rem;align-items:center}
@media (min-width:820px){.takeover{grid-template-columns:1fr auto}}
.takeover h2{font-size:var(--step-2);max-width:26ch}
.promises{display:grid;gap:1rem;margin-top:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.promise{background:rgb(255 255 255/.05);border:1px solid rgb(255 255 255/.12);border-radius:var(--r-md);padding:1.3rem}
.promise h3{font-size:1.02rem;margin-bottom:.5rem}
.promise p{color:var(--on-dark-muted);font-size:.92rem}
.tier-lines{display:grid;gap:.6rem;margin-top:1.6rem}
.tier-line{
  display:grid;gap:.25rem;padding:1.2rem 1.35rem;border:1px solid var(--mist);border-radius:var(--r-md);
  background:var(--cream-2);text-decoration:none;
  transition-property:transform,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.2,.8,.2,1);
}
@media (min-width:760px){.tier-line{grid-template-columns:12rem 10rem 1fr;align-items:baseline;gap:1.5rem}}
.tier-line:hover{transform:translateY(-2px);border-color:var(--amber-deep)}
.tier-line b{font-family:var(--font-display);font-size:var(--step-1)}
.tier-line .p{font-family:var(--font-display);font-weight:700;color:var(--amber-text);font-variant-numeric:tabular-nums}
.tier-line .d{color:var(--ink-soft);font-size:.92rem}
.contact-grid{display:grid;gap:2rem}
@media (min-width:900px){.contact-grid{grid-template-columns:1.1fr 1fr;gap:3rem}}
.field{display:grid;gap:.4rem;margin-bottom:1rem}
.field label{font-family:var(--font-display);font-weight:700;font-size:.88rem}
.field input,.field textarea,.field select{
  font:inherit;font-size:.96rem;padding:.8rem .95rem;border:1px solid var(--mist);
  border-radius:var(--r-sm);background:var(--cream);color:var(--ink);width:100%;
}
.field input:focus,.field textarea:focus{outline:3px solid var(--glow-amber);outline-offset:1px;border-color:transparent}
.field-error{color:var(--brick);font-size:.85rem}
.form-note{font-size:.84rem;color:var(--ink-muted);margin-top:.8rem}
.direct{display:grid;gap:.8rem;margin-top:1.5rem}
.cases{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));margin-top:1.6rem}
.case{background:var(--cream-2);border:1px solid var(--mist);border-radius:var(--r-lg);padding:1.4rem}
.case h3{margin-bottom:.5rem}
.case p{font-size:.94rem;color:var(--ink-soft)}
.cassien-band{padding-block:clamp(3rem,6vw,4.5rem)}
.cassien-band .takeover h2{max-width:22ch}
.cassien-band a{color:var(--glow-amber)}
.hero-note{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:1.4rem;font-size:.86rem;color:var(--on-dark-muted)}
.strike{position:relative;white-space:nowrap}
.strike svg{position:absolute;left:0;right:0;bottom:.04em;width:100%;height:.3em;fill:none;stroke:var(--glow-amber);stroke-width:5;stroke-linecap:round}

/* print: the legal pages get printed by accountants */
@media print{.site-header,.site-footer,.cta,.device{display:none}body{background:#FDFBF5;color:#14201B}}

/* ==========================================================================
   14. ARCHETYPE SAMPLE SCREENS (reused by the hero device and the gallery)
   Authored at 1280x800; container queries adapt the same DOM to 390 px.
   ========================================================================== */
.s{
  width:100%;height:100%;container-type:inline-size;position:relative;overflow:hidden;
  display:flex;flex-direction:column;font-family:var(--font-body);line-height:1.45;
}
.s *{box-sizing:border-box}
.s-nav{display:flex;align-items:center;gap:26px;padding:20px 40px;flex:none}
.s-logo{height:28px;width:auto;outline:0;display:block}
.s-links{display:flex;gap:22px;margin-left:auto;font-size:14px;opacity:.72}
.s-call{
  font-family:var(--font-display);font-weight:800;font-size:14px;padding:9px 16px;border-radius:10px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.s-hero{flex:1;display:grid;grid-template-columns:1.06fr .94fr;gap:38px;padding:34px 40px 40px;align-items:center;min-height:0}
.s-copy{display:grid;gap:16px;align-content:center}
.s-eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;font-family:var(--font-display)}
.s-h{font-family:var(--font-display);font-weight:800;font-size:50px;line-height:1.02;letter-spacing:-.03em;margin:0}
.s-sub{font-size:16px;opacity:.78;max-width:32ch;margin:0}
.s-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.s-btn,.s-btn2{
  font-family:var(--font-display);font-weight:700;font-size:14px;padding:12px 20px;border-radius:10px;
  white-space:nowrap;
}
.s-btn2{background:transparent;border:1.5px solid currentColor;opacity:.72}
.s-chip{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  padding:7px 13px;border-radius:999px;width:fit-content;
}
.s-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.s-img{position:relative;height:100%;min-height:200px;border-radius:14px;overflow:hidden}
.s-img img{width:100%;height:100%;object-fit:cover;display:block;outline:0}
.s-img::after{content:"";position:absolute;inset:0;pointer-events:none}
.s-strip{display:flex;gap:1px;flex:none;font-size:12px;font-weight:700;font-family:var(--font-display)}
.s-strip span{flex:1;padding:14px 18px;text-align:center;letter-spacing:.04em}
@container (max-width:700px){
  .s-nav{padding:14px 16px;gap:10px}
  .s-logo{height:20px}
  .s-links{display:none}
  .s-call{font-size:11px;padding:7px 11px;border-radius:8px}
  .s-hero{grid-template-columns:1fr;gap:14px;padding:16px 16px 18px;align-content:start}
  .s-h{font-size:30px}
  .s-sub{font-size:13px;max-width:none}
  .s-eyebrow{font-size:10px}
  .s-btn,.s-btn2{font-size:12px;padding:10px 14px;flex:1;text-align:center}
  .s-cta{gap:7px}
  .s-img{min-height:118px;order:-1;border-radius:10px}
  .s-strip span{padding:10px 6px;font-size:10px}
  .s-chip{font-size:10px;padding:5px 10px}
}

/* --- ATELIER: dark industrial, warm side light, heavy grotesque --------- */
.s-atelier{background:#121412;color:#F2EFE9}
.s-atelier::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;mix-blend-mode:overlay;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='na'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23na)'/%3E%3C/svg%3E");
}
.s-atelier .s-nav{border-bottom:1px solid rgb(255 255 255/.1)}
.s-atelier .s-eyebrow{color:#F5B301}
.s-atelier .s-chip{color:#F5B301;background:rgb(245 179 1/.12)}
.s-atelier .s-call{background:#F5B301;color:#121412}
.s-atelier .s-btn{background:#F5B301;color:#121412}
.s-atelier .s-img{background:linear-gradient(145deg,#2A2620,#141513 62%,#332B1E)}
.s-atelier .s-img::after{background:radial-gradient(70% 60% at 22% 26%,rgb(245 179 1/.2),transparent 70%)}
.s-atelier .s-strip{background:#0C0D0C;color:#8E8B84}
.s-atelier .s-strip span{border-right:1px solid rgb(255 255 255/.07)}

/* --- TEHNIC CURAT: light, airy, geometric, soft mesh -------------------- */
.s-tehnic{background:#F7FAFB;color:#10222E}
.s-tehnic::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(45% 50% at 12% 8%,rgb(30 111 232/.13),transparent 70%),
             radial-gradient(40% 46% at 92% 88%,rgb(24 163 122/.14),transparent 70%);
}
.s-tehnic>*{position:relative;z-index:1}
.s-tehnic .s-nav{border-bottom:1px solid rgb(16 34 46/.09)}
.s-tehnic .s-h{font-weight:600;letter-spacing:-.012em}
.s-tehnic .s-eyebrow{color:#1E6FE8;letter-spacing:.2em}
.s-tehnic .s-call{background:#10222E;color:#F7FAFB}
.s-tehnic .s-btn{background:#1E6FE8;color:#F7FAFB}
.s-tehnic .s-chip{background:rgb(24 163 122/.14);color:#0F7A5C}
.s-tehnic .s-img{background:linear-gradient(160deg,#DCE9F5,#EAF3F6 55%,#D4EAE1);box-shadow:0 18px 34px -22px rgb(16 34 46/.5)}
.s-tehnic .s-strip{background:#EDF3F5;color:#42606F}
.s-tehnic .s-strip span{border-right:1px solid rgb(16 34 46/.07)}

/* --- SOLID: concrete, massive blocks, condensed uppercase --------------- */
.s-solid{background:#E9E6E0;color:#232520}
.s-solid::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='nc'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23nc)' opacity='.16'/%3E%3C/svg%3E");
}
.s-solid>*{position:relative;z-index:1}
.s-solid .s-nav{background:#232520;color:#EDEAE3;padding-block:16px}
.s-solid .s-h{text-transform:uppercase;letter-spacing:-.02em;font-size:46px;line-height:.98}
.s-solid .s-eyebrow{color:#4A5730;letter-spacing:.2em}
.s-solid .s-call{background:#D9822B;color:#211F19}
.s-solid .s-btn{background:#5C6B3A;color:#F1EFE9;border-radius:4px}
.s-solid .s-btn2{border-radius:4px}
.s-solid .s-chip{background:rgb(92 107 58/.16);color:#4A5730}
.s-solid .s-img{border-radius:4px;background:linear-gradient(150deg,#BFB9AE,#97928A 58%,#7E7566)}
.s-solid .s-img::after{background:linear-gradient(0deg,rgb(35 37 32/.22),transparent 58%)}
.s-solid .s-strip{background:#DAD5CC;color:#5A5648}
.s-solid .s-strip span{border-right:1px solid rgb(35 37 32/.1)}
@container (max-width:700px){.s-solid .s-h{font-size:27px}}

/* --- EDITORIAL: cream, space, display serif, duotone image -------------- */
.s-editorial{background:#F4EFE6;color:#23201C}
.s-editorial .s-nav{border-bottom:1px solid rgb(35 32 28/.12);padding-block:24px}
.s-editorial .s-h{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.01em;font-size:58px;line-height:1.04}
.s-editorial .s-eyebrow{color:#8C2F39;letter-spacing:.22em}
.s-editorial .s-call{background:transparent;border:1.5px solid #23201C;color:#23201C;font-weight:700}
.s-editorial .s-btn{background:#8C2F39;color:#F7F2EA;border-radius:2px}
.s-editorial .s-btn2{border-radius:2px}
.s-editorial .s-chip{background:rgb(140 47 57/.1);color:#8C2F39}
.s-editorial .s-img{border-radius:2px;background:linear-gradient(150deg,#D8CFC0,#B9AE9C 60%,#5E564B)}
.s-editorial .s-img img{filter:url(#duotone-editorial)}
.s-editorial .s-hero{gap:46px;padding:44px 44px 48px}
.s-editorial .s-strip{background:#EDE6DA;color:#6A6157}
.s-editorial .s-strip span{border-right:1px solid rgb(35 32 28/.1)}
@container (max-width:700px){
  .s-editorial .s-h{font-size:32px}
  .s-editorial .s-hero{gap:14px;padding:16px 16px 18px}
  .s-editorial .s-nav{padding-block:14px}
}

/* ==========================================================================
   15. GALLERY ART: generated image when present, art-directed field when not
   ========================================================================== */
:root{--mini-w:118}
@media (min-width:760px){:root{--mini-w:104}}
@media (min-width:1080px){:root{--mini-w:132}}
.gcard .mini{width:calc(var(--mini-w) * 1px + 12px)}
.shot{position:relative}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none}
.shot-atelier{background:linear-gradient(145deg,#2A2620,#141513 58%,#3A2F1C)}
.shot-atelier::after{background:radial-gradient(62% 70% at 24% 22%,rgb(245 179 1/.26),transparent 72%)}
.shot-tehnic{background:linear-gradient(160deg,#CFE2F2,#E6F1F4 52%,#C9E6DA)}
.shot-tehnic::after{background:radial-gradient(60% 64% at 78% 18%,rgb(30 111 232/.2),transparent 70%)}
.shot-solid{background:linear-gradient(150deg,#B3ADA2,#8D887F 55%,#6E6656)}
.shot-solid::after{background:linear-gradient(0deg,rgb(35 37 32/.28),transparent 56%)}
.shot-editorial{background:linear-gradient(150deg,#DCD3C4,#B5A995 58%,#584F45)}
.shot-editorial::after{background:radial-gradient(64% 70% at 30% 26%,rgb(140 47 57/.22),transparent 72%)}
.shot picture,.shot>img{position:absolute;inset:0;width:100%;height:100%}

.cta{position:relative}
.cta-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;
  opacity:.3;mix-blend-mode:soft-light;outline:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%,#000);
  mask-image:linear-gradient(90deg,transparent,#000 42%,#000);
}

/* ==========================================================================
   16. PAGE COMPOSITIONS (phase 2: the other 7 pages)
   ========================================================================== */
.page-head .eyebrow{margin-bottom:1.1rem}
.page-head h1{font-size:var(--step-3);max-width:19ch;letter-spacing:-.025em}

/* --- comparison table: real table on desktop, stacked rows on phones ----- */
.cmp-wrap{margin-top:1.4rem;border:1px solid var(--mist);border-radius:var(--r-lg);background:var(--cream-2);overflow:hidden}
.alt .cmp-wrap{background:var(--cream)}
.cmp{width:100%;border-collapse:collapse;font-size:.92rem}
.cmp caption{text-align:left;padding:1.2rem 1.35rem .2rem;color:var(--ink-muted);font-size:.86rem}
.cmp th,.cmp td{text-align:left;padding:.78rem 1rem;vertical-align:top;border-top:1px solid var(--mist)}
.cmp thead th{
  position:sticky;top:4.5rem;z-index:2;background:var(--cream-2);border-top:0;
  font-family:var(--font-display);font-size:.88rem;padding-block:.9rem;
}
.alt .cmp thead th{background:var(--cream)}
.cmp thead th:first-child{font-weight:700;color:var(--ink-muted)}
.cmp tbody th{font-weight:400;color:var(--ink-soft);width:44%}
.cmp td{color:var(--ink-soft);width:18.6%;font-variant-numeric:tabular-nums}
.cmp .grp th{
  background:color-mix(in srgb,var(--amber-deep) 9%,transparent);
  font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:.82rem;
  letter-spacing:.09em;text-transform:uppercase;padding-block:.62rem;
}
.cmp .col-hi{background:color-mix(in srgb,var(--glow-amber) 9%,transparent)}
.cmp .yes{color:var(--amber-text);font-weight:700}
.cmp .no{color:var(--ink-muted)}
@media (max-width:820px){
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp thead{display:none}
  .cmp tbody th{font-family:var(--font-display);font-weight:700;color:var(--ink);padding-bottom:.35rem;border-top:1px solid var(--mist)}
  .cmp tbody td{border-top:0;padding:.1rem 1rem .1rem 2.2rem;position:relative}
  .cmp tbody td::before{content:attr(data-t);position:absolute;left:1rem;color:var(--ink-muted);font-size:.78rem}
  .cmp tbody tr td:last-child{padding-bottom:.85rem}
  .cmp .grp th{padding-left:1rem}
}

/* --- pay block ---------------------------------------------------------- */
.pay{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));margin-top:1.4rem}
.pay div{background:var(--cream-2);border:1px solid var(--mist);border-radius:var(--r-md);padding:1.15rem}
.alt .pay div{background:var(--cream)}
.pay b{display:block;font-family:var(--font-display);margin-bottom:.35rem}
.pay p{font-size:.9rem;color:var(--ink-soft)}

/* --- automations bento -------------------------------------------------- */
.autos{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:720px){.autos{grid-template-columns:repeat(6,1fr)}.autos>li{grid-column:span 3}}
@media (min-width:1040px){
  .autos>li{grid-column:span 2}
  .autos>li:nth-child(1){grid-column:span 4}
  .autos>li:nth-child(6){grid-column:span 4}
}
.auto{
  height:100%;background:var(--cream-2);border:1px solid var(--mist);border-radius:var(--r-lg);
  padding:1.5rem;display:grid;gap:.55rem;align-content:start;
  transition-property:transform,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.2,.8,.2,1);
}
.alt .auto{background:var(--cream)}
.auto:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--amber-deep) 40%,var(--mist))}
.auto .ic{width:26px;height:26px;stroke:var(--amber-deep);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.auto h3{font-size:var(--step-1)}
.auto p{font-size:.94rem;color:var(--ink-soft)}
.auto .ex{
  font-size:.86rem;color:var(--ink);background:#F6EAD5;   /* fixed tint: the label keeps AA whatever the card is */
  border-radius:var(--r-sm);padding:.6rem .8rem;margin-top:.25rem;
}
.auto .ex b{font-family:var(--font-display);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--amber-text);display:block;margin-bottom:.15rem}

/* --- contact ------------------------------------------------------------ */
.direct .big{
  font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,5vw,2.9rem);
  letter-spacing:-.03em;text-decoration:none;display:inline-block;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.direct .big:hover{color:var(--amber-text)}
.direct p{color:var(--ink-soft);font-size:.96rem}
.wa-form{background:var(--cream-2);border:1px solid var(--mist);border-radius:var(--r-lg);padding:clamp(1.2rem,3vw,1.75rem)}
.alt .wa-form{background:var(--cream)}
.wa-form .btn{width:100%}
.hours{display:grid;gap:.5rem;margin-top:1.5rem;font-size:.92rem;color:var(--ink-soft)}
.hours div{display:flex;gap:.8rem;justify-content:space-between;border-top:1px solid var(--mist);padding-top:.5rem}
.hours b{font-family:var(--font-display);color:var(--ink)}

/* --- legal pages: measure, numbering, sticky mini-TOC ------------------- */
.legal-layout{display:grid;gap:2.5rem}
@media (min-width:1000px){.legal-layout{grid-template-columns:15rem minmax(0,1fr);gap:3.5rem;align-items:start}}
.toc{display:none}
@media (min-width:1000px){
  .toc{
    display:block;position:sticky;top:5.5rem;font-size:.86rem;
    border-left:1px solid var(--mist);padding-left:1.1rem;max-height:calc(100vh - 8rem);overflow:auto;
  }
  .toc p{font-family:var(--font-display);font-weight:700;font-size:.74rem;letter-spacing:.13em;
    text-transform:uppercase;color:var(--amber-text);margin-bottom:.7rem}
  .toc ol{display:grid;gap:.42rem;counter-reset:toc}
  .toc a{text-decoration:none;color:var(--ink-muted);display:block;line-height:1.35}
  .toc a:hover,.toc a:focus-visible{color:var(--ink)}
}
/* text keeps a 65-75 character measure; tables get the whole column */
.legal>*{max-width:40rem}
.legal table,.legal>table{max-width:none}
.legal>p:first-child{
  font-size:var(--step-1);line-height:1.5;color:var(--ink);
  border-left:3px solid var(--glow-amber);padding-left:1.1rem;margin-bottom:2.4rem;
}
.legal h2{
  font-size:var(--step-2);margin-top:2.8rem;margin-bottom:.9rem;scroll-margin-top:6rem;
  padding-top:1.4rem;border-top:1px solid var(--mist);
}
.legal h2:first-of-type{border-top:0;padding-top:0}
.legal h3{font-size:var(--step-1);margin-top:1.8rem;margin-bottom:.5rem}
.legal p,.legal li{color:var(--ink-soft);margin-bottom:.85rem;line-height:1.7}
.legal ul,.legal ol{display:grid;gap:.6rem;margin:0 0 1.2rem;padding-left:1.4rem}
.legal ul{list-style:disc}
.legal ol{list-style:decimal}
.legal ul li,.legal ol li{margin-bottom:0;padding-left:.25rem}
.legal a{color:var(--amber-text);text-underline-offset:3px}
.legal strong{color:var(--ink)}
.legal table{width:100%;border-collapse:collapse;font-size:.9rem;margin:0 0 1.4rem}
.legal th,.legal td{text-align:left;padding:.65rem .8rem;border:1px solid var(--mist);vertical-align:top;color:var(--ink-soft)}
.legal thead th{background:var(--cream-2);font-family:var(--font-display);color:var(--ink)}
.legal tbody th{width:32%;font-family:var(--font-display);font-weight:700;color:var(--ink);background:var(--cream-2)}
@media (max-width:700px){
  .legal table,.legal tbody,.legal tr,.legal th,.legal td{display:block;width:auto}
  .legal thead{display:none}
  .legal tbody tr{border:1px solid var(--mist);border-radius:var(--r-md);margin-bottom:.8rem;overflow:hidden}
  .legal tbody th,.legal tbody td{border:0;border-bottom:1px solid var(--mist)}
  .legal tbody tr td:last-child{border-bottom:0}
  .legal td[data-label]::before{content:attr(data-label);display:block;font-family:var(--font-display);
    font-weight:700;color:var(--ink);font-size:.78rem;margin-bottom:.15rem}
}
.legal .meta{color:var(--ink-muted);font-size:.88rem}

/* --- small pages (multumim, 404) --------------------------------------- */
.mini{min-height:min(74svh,44rem);display:grid;align-items:center;padding-block:clamp(3rem,8vw,6rem)}
.mini .wrap{max-width:52rem}
.mini h1{font-size:var(--step-3);max-width:18ch}
.mini .lead{margin-top:1.2rem}
.mini .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.mini .code{
  font-family:var(--font-display);font-weight:800;font-size:clamp(4rem,16vw,9rem);line-height:.85;
  letter-spacing:-.05em;color:var(--glow-amber);opacity:.28;margin-bottom:.6rem;
  font-variant-numeric:tabular-nums;
}