/* SISONKE TACTICAL AND ARMED RESPONSE */
:root{--bg:#FBF3E6;--surface:#FFFFFF;--ink:#3B2618;--muted:#7A5E4A;--accent:#7A4A2A;--accent-text:#7A4A2A;--accent-ink:#FFFFFF;--band:#5A3620;--r:20px;--display:"Young Serif",Georgia,serif;--body:"Outfit",system-ui,sans-serif;--line:color-mix(in srgb,var(--ink) 14%,transparent)}
*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}html,body{overflow-x:clip}body{margin:0}img,svg{display:block;max-width:100%}a{color:inherit}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--body)}
  .w{width:min(100% - 40px,1200px);margin-inline:auto}
  h1,h2,h3,.logo{font-family:var(--display);font-weight:500;line-height:1.04;letter-spacing:-.01em;margin:0}
  h1{font-size:clamp(40px,6vw,76px)}
  h2{font-size:clamp(30px,3.6vw,48px)}
  h3{font-size:22px;line-height:1.2}
  p{margin:0}
  .eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
  .dark .eyebrow,.on-img .eyebrow{color:inherit;opacity:.85}
  .lead{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:56ch}
  .muted{color:var(--muted)}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:min(var(--r),999px);background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:16px;text-decoration:none;border:0;cursor:pointer;transition:transform .16s ease,filter .16s ease}
  .btn:hover{filter:brightness(1.06)}.btn:active{transform:scale(.97)}
  .btn.ghost{background:transparent;color:inherit;border:1.5px solid currentColor}
  .btn.sm{min-height:42px;padding:0 18px;font-size:15px}
  a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);background:var(--surface)}
  section{scroll-margin-top:80px}
  .pad{padding:clamp(64px,9vw,120px) 0}
  .alt{background:var(--surface)}

  /* header */
  .hd{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .hd .w{display:flex;align-items:center;gap:28px;height:78px}
  .logo{font-size:22px;text-decoration:none;letter-spacing:-.01em;}
  .hd nav{display:flex;gap:26px;margin-left:auto;font-size:15px;font-weight:500}
  .hd-ic{display:flex;gap:6px}
  .ib{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);color:var(--ink);transition:background .16s ease,border-color .16s ease}
  .ib:hover{border-color:var(--ink);background:var(--surface)}
  .ib .ic{width:18px;height:18px}
  .ib .dot{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 4px}
  .hd nav a{text-decoration:none;opacity:.8}.hd nav a:hover,.hd nav a[aria-current=page]{opacity:1;text-decoration:underline;text-underline-offset:6px}
  .hd details{display:none;position:relative}
  .hd summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%}
  .hd summary .ic{width:18px;height:18px}
  .hd summary::-webkit-details-marker{display:none}
  .hd details div{position:absolute;right:0;top:52px;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:min(var(--r),16px);padding:8px;box-shadow:0 20px 40px -20px rgba(0,0,0,.35)}
  .hd details a{display:block;padding:12px 14px;text-decoration:none;font-weight:500}
  @media (max-width:880px){.hd nav,.hd .hd-cta{display:none}.hd details{display:block}.hd-ic{margin-left:auto}.hd .w{gap:10px;height:68px}.logo{font-size:19px;margin-right:auto}}
  @media (max-width:380px){.hd-ic .ib:nth-child(2){display:none}}

  /* heroes */
  .hero-split{padding:clamp(48px,7vw,96px) 0}
  .hero-split .w{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
  .hero-split .pic{aspect-ratio:4/3.6}
  .hero-split h1{margin:18px 0 22px}
  .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
  .hero-img{position:relative;min-height:min(84vh,760px);display:flex;color:#fff;overflow:hidden}
  .hero-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.35) 55%,rgba(0,0,0,.08))}
  .hero-img .w{position:relative;z-index:1;align-self:flex-end;padding:0 0 clamp(48px,8vw,96px)}
  .hero-img h1{max-width:15ch;margin:16px 0 20px}.hero-img .lead{color:rgba(255,255,255,.88)}
  .hero-center{text-align:center}.hero-center::after{background:rgba(0,0,0,.48)}
  .hero-center .w{align-self:center;padding:96px 0;display:flex;flex-direction:column;align-items:center}
  .hero-center h1{max-width:18ch}.hero-center .lead{margin-inline:auto}.hero-center .actions{justify-content:center}
  .hero-stacked{padding:clamp(56px,8vw,104px) 0 0}
  .hero-stacked h1{font-size:clamp(44px,7.4vw,108px);max-width:16ch;margin:18px 0 26px}
  .hero-stacked .row{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-end;justify-content:space-between}
  .hero-stacked .pic{margin-top:clamp(40px,6vw,72px);aspect-ratio:21/9}
  .hero-stacked .pic img{border-radius:0}
  .hero-framed{padding:clamp(40px,6vw,80px) 0}
  .hero-framed .w{position:relative;display:grid;grid-template-columns:repeat(12,1fr);align-items:center}
  .hero-framed .pic{grid-column:5/-1;grid-row:1;aspect-ratio:16/11}
  .hero-framed .card{grid-column:1/7;grid-row:1;position:relative;z-index:1;background:var(--surface);padding:clamp(28px,4vw,56px);border-radius:var(--r);box-shadow:0 30px 60px -36px rgba(0,0,0,.35)}
  .hero-framed h1{font-size:clamp(36px,4.6vw,64px);margin:16px 0 18px}
  @media (max-width:880px){
    .hero-split .w{grid-template-columns:1fr}.hero-img{min-height:620px}
    .hero-framed .w{display:block}.hero-framed .pic{aspect-ratio:4/3}.hero-framed .card{margin:-72px 12px 0}
  }

  /* home blocks */
  .intro .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
  .intro .pic{aspect-ratio:4/4.4}
  .intro h2{margin:14px 0 20px}
  .more{display:inline-flex;gap:8px;margin-top:26px;font-weight:600;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px}
  .hl{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
  .hl .pic{aspect-ratio:4/3;margin-bottom:20px}
  .hl h3{margin-bottom:8px}
  .hl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;justify-content:flex-start;gap:20px;min-height:100%}
  .hl-card .more{margin-top:auto;align-self:flex-start}
  .hl-card .deco{width:120px;right:-20px;top:-20px;opacity:.9}
  .hl-card{position:relative;overflow:hidden}
  .band{position:relative;min-height:520px;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden}
  .band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .band::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--band) 62%,transparent)}
  .band p{position:relative;z-index:1;font-family:var(--display);font-size:clamp(30px,4.2vw,58px);line-height:1.12;max-width:22ch;padding:0 20px}
  .head2{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:flex-end;justify-content:space-between}
  .ctab{background:var(--band);color:#fff;border-radius:var(--r);padding:clamp(40px,6vw,80px);display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
  .ctab h2{max-width:20ch}.ctab p{opacity:.85;margin-top:12px;max-width:52ch}
  .ctab .btn{background:#fff;color:var(--band)}
  @media (max-width:880px){.intro .split,.hl{grid-template-columns:1fr}}


  /* shapes: each design's visual language (theme 'shape'), applied to the pictures that are not full-bleed */
  .badge{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--accent-ink);flex:none}
  .badge .ic{width:24px;height:24px}
  .badge.sm{width:44px;height:44px}.badge.sm .ic{width:20px;height:20px}
  .badge.soft{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text)}
  .deco{position:absolute;color:var(--accent);pointer-events:none;z-index:0}
  .comp{position:relative}
  .comp>.main{position:relative;z-index:1;height:100%}
  .comp .deco.a{width:46%;top:-7%;right:-7%}
  .comp .sub{position:absolute;z-index:2;width:38%;aspect-ratio:1;left:-6%;bottom:-6%;border:6px solid var(--bg);overflow:hidden;box-shadow:0 20px 40px -24px rgba(0,0,0,.45)}
  .comp .sub img{width:100%;height:100%;object-fit:cover}
  .hl .pic{position:relative}
  .hl .pic .badge{position:absolute;left:18px;bottom:-22px;z-index:2;box-shadow:0 0 0 5px var(--bg)}
  .hl .pic+h3{margin-top:34px}
  .shape-round .pic .img,.shape-round .comp .sub{border-radius:max(var(--r),22px)}
  .shape-rect .comp .sub{border-radius:0}
  .shape-rect .intro .comp>.main::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--accent);z-index:-1}
  .shape-arch .intro .pic .img,.shape-arch .hl .pic .img,.shape-arch .story .pic .img,.shape-arch .room .pic .img,.shape-arch .hero-split .pic .img{border-radius:999px 999px var(--r) var(--r)}
  .shape-arch .comp .sub{border-radius:50%}
  .shape-circle .intro .pic{aspect-ratio:1}
  .shape-circle .intro .pic .img,.shape-circle .story .pic .img,.shape-circle .comp .sub{border-radius:50%}
  .shape-circle .story .pic{aspect-ratio:1}
  .shape-circle .hl .pic{aspect-ratio:1;max-width:280px}
  .shape-circle .hl .pic .img,.shape-circle .room .pic .img{border-radius:50%}
  .shape-circle .room .pic{aspect-ratio:1;max-width:460px;justify-self:center;width:100%}
  .shape-circle .hero-split .pic .img{border-radius:50% 50% var(--r) 50%}
  .shape-blob .intro .pic .img,.shape-blob .story .pic .img,.shape-blob .hero-split .pic .img{border-radius:58% 42% 50% 50% / 45% 52% 48% 55%}
  .shape-blob .hl .pic .img,.shape-blob .room .pic .img{border-radius:42% 58% 38% 62% / 52% 40% 60% 48%}
  .shape-blob .comp .sub{border-radius:50%}
  .values div .badge{margin-bottom:16px}
  .ct dt{display:flex;align-items:center;gap:10px}
  .ct dt .badge{width:32px;height:32px}.ct dt .badge .ic{width:16px;height:16px}
  .card2 .b .badge{margin-bottom:6px}

  /* inner page header */
  .ph{background:var(--band);color:#fff;padding:clamp(56px,8vw,112px) 0 clamp(48px,6vw,80px)}
  .ph h1{font-size:clamp(40px,5.4vw,72px);margin-top:14px;max-width:18ch}
  .ph .lead{color:rgba(255,255,255,.82);margin-top:18px}

  /* services layouts */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .card2{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
  .alt .card2{background:var(--bg)}
  .card2 .pic{aspect-ratio:4/3}.card2 .pic img{border-radius:0}
  .card2 .b{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1}
  .price{font-weight:700;color:var(--accent-text);margin-top:auto;padding-top:10px}
  .dark .price,.alt.dark .price{color:var(--accent)}
  .list{border-top:1px solid var(--line)}
  .list .row{display:grid;grid-template-columns:1fr auto;gap:6px 32px;padding:24px 0;border-bottom:1px solid var(--line)}
  .list .row b{font-size:19px}.list .row .price{margin:0;padding:0;text-align:right;white-space:nowrap}
  .menu{display:grid;grid-template-columns:1fr 1fr;gap:8px 64px}
  .menu .it{padding:18px 0;border-bottom:1px solid var(--line)}
  .menu .top{display:flex;align-items:baseline;gap:10px}
  .menu .top b{font-family:var(--display);font-size:21px;font-weight:600}
  .menu .top i{flex:1;border-bottom:1.5px dotted color-mix(in srgb,var(--ink) 35%,transparent);transform:translateY(-5px)}
  .menu .top span{font-weight:700;color:var(--accent-text)}
  .products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .prod .pic{aspect-ratio:1;margin-bottom:14px}
  .prod .pic.plain{display:grid;place-items:center;background:var(--surface);border-radius:var(--r);font-family:var(--display);font-size:40px;color:var(--muted)}
  .prod b{display:block}.prod .price{padding:4px 0 12px}
  .rooms{display:grid;gap:clamp(40px,6vw,80px)}
  .room{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
  .room:nth-child(even) .pic{order:2}
  .room .pic{aspect-ratio:4/3}.room h3{font-size:clamp(26px,2.6vw,34px)}
  .room .price{font-size:20px}
  .sched .row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) auto;gap:8px 28px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
  .sched{border-top:1px solid var(--line)}
  .note{margin-top:28px;font-size:15px;color:var(--muted)}
  @media (max-width:980px){.products{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:880px){.cards,.menu{grid-template-columns:1fr}.room{grid-template-columns:1fr}.room:nth-child(even) .pic{order:0}.sched .row{grid-template-columns:1fr auto}.sched .row .d{grid-column:1/-1}}

  /* about */
  .story{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
  .story p+p{margin-top:18px}.story .pic{aspect-ratio:4/5}
  .values{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px}
  .values div{border-top:2px solid var(--accent);padding-top:20px}
  .values h3{margin-bottom:8px}
  .team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
  .team .av{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);font-family:var(--display);font-size:40px;color:var(--accent);margin-bottom:14px;max-width:180px}
  @media (max-width:880px){.story,.values{grid-template-columns:1fr}.team{grid-template-columns:repeat(2,1fr)}}

  /* gallery */
  .gal{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
  .gal figure{margin:0}.gal figcaption{font-size:14px;color:var(--muted);margin-top:10px}
  .gal .g0{grid-column:span 4}.gal .g1{grid-column:span 2}.gal .g2,.gal .g3{grid-column:span 3}
  .gal .g0 .pic{aspect-ratio:16/10}.gal .g1 .pic{aspect-ratio:4/5.3}.gal .g2 .pic,.gal .g3 .pic{aspect-ratio:4/3}
  @media (max-width:880px){.gal{grid-template-columns:1fr}.gal figure{grid-column:auto!important}.gal .pic{aspect-ratio:4/3!important}}

  /* contact */
  .ct{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:start}
  .ct dl{margin:24px 0 0;display:grid;gap:18px}
  .ct dt{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .ct dd{margin:4px 0 0;font-size:18px}
  .hours{margin-top:8px;width:100%;border-collapse:collapse;font-size:16px}.hours td{padding:6px 0;border-bottom:1px solid var(--line)}.hours td+td{text-align:right}
  form.f{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,40px);display:grid;gap:16px}
  .alt form.f{background:var(--bg)}
  .f label{display:grid;gap:6px;font-size:14px;font-weight:600}
  .f input,.f textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);border-radius:min(var(--r),12px);background:var(--bg);color:var(--ink)}
  .f textarea{min-height:120px;resize:vertical}
  .map{margin-top:28px;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--surface);border:1px solid var(--line)}
  @media (max-width:880px){.ct{grid-template-columns:1fr}}

  /* footer */
  .ft{background:var(--band);color:rgba(255,255,255,.86);padding:64px 0 36px;font-size:15px}
  .ft .w{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
  .ft .logo{color:#fff}.ft a{text-decoration:none}
  .ft small{display:block;grid-column:1/-1;border-top:1px solid rgba(255,255,255,.16);padding-top:22px;margin-top:12px;opacity:.7}
  @media (max-width:880px){.ft .w{grid-template-columns:1fr}}

  /* polish: soft light behind the hero, a ribbon that runs, lift on hover (motion is off for visitors who ask for none) */
  .style-modern .hero-split,.style-soft .hero-split,.style-luxe .hero-split{position:relative;isolation:isolate;overflow:hidden}
  .style-modern .hero-split::before,.style-soft .hero-split::before,.style-luxe .hero-split::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:-1;pointer-events:none;
    background:radial-gradient(38% 46% at 18% 28%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),radial-gradient(34% 42% at 82% 24%,color-mix(in srgb,var(--accent-text) 14%,transparent),transparent 70%);
    filter:blur(30px);animation:sf-aurora 22s ease-in-out infinite alternate}
  @keyframes sf-aurora{to{transform:translate3d(3%,4%,0) scale(1.08)}}
  .ribbon{overflow:hidden;background:var(--band);color:#fff;padding:18px 0;font:700 clamp(20px,2.4vw,30px)/1.2 var(--display);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
  .ribbon span{display:inline-flex;align-items:center;gap:clamp(32px,6vw,72px)}
  .ribbon span::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none}
  .btn{transition:filter .2s ease,translate .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,transform .15s ease}
  .btn:not(.ghost):hover{translate:0 -2px;box-shadow:0 16px 30px -16px color-mix(in srgb,var(--accent) 80%,transparent)}
  .hl-card,.card2,.prod{transition:translate .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
  .hl-card:hover,.card2:hover{translate:0 -5px;box-shadow:0 26px 44px -30px rgba(0,0,0,.45)}
  .card2 .pic img,.prod .pic img{transition:scale 1s cubic-bezier(.16,1,.3,1)}
  .card2:hover .pic img,.prod:hover .pic img{scale:1.06}
  .more{transition:gap .25s ease}.more:hover{gap:14px}
  @media (prefers-reduced-motion:reduce){.hero-split::before{animation:none!important}.hl-card:hover,.card2:hover,.btn:hover{translate:none}}
/* The editor's own blocks (App\Sites\Theme; resources/js/components/site-editor/blocks.js). Every
   design gets these after its own stylesheet, so a block dropped into any template wears that
   template's palette and fonts: only var(--accent), var(--surface)… here, never a fixed colour. */
.sf-section{padding:clamp(56px,8vw,104px) 0}
.sf-section.sf-alt{background:var(--surface)}
.sf-section.sf-dark{background:var(--band);color:#fff}
.sf-section.sf-dark .muted,.sf-section.sf-dark .lead{color:rgba(255,255,255,.82)}
.sf-head{max-width:720px;margin-bottom:clamp(28px,4vw,48px)}
.sf-head h2{margin:12px 0 14px}
.sf-center{text-align:center;margin-inline:auto}
.sf-cols{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.sf-cols.sf-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sf-col{min-height:48px;display:flex;flex-direction:column;gap:14px}
.sf-text{max-width:68ch}
.sf-text p+p{margin-top:14px}
.sf-img{display:block;width:100%;height:auto;border-radius:var(--r)}
.sf-btn-row{display:flex;flex-wrap:wrap;gap:12px}
.sf-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sf-gallery figure{margin:0}
.sf-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.sf-gallery figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.sf-video{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.sf-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sf-video-play{position:absolute;inset:0;display:grid;place-items:center;background:var(--band,#0C0D0C);color:#fff;text-decoration:none}
.sf-video-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sf-video-badge{position:relative;display:block;width:68px;height:68px;border-radius:50%;background:rgba(12,13,12,.78);box-shadow:0 0 0 2px rgba(255,255,255,.9) inset;transition:transform .2s}
.sf-video-badge::after{content:"";position:absolute;left:27px;top:21px;border-left:22px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent}
.sf-video-play:hover .sf-video-badge,.sf-video-play:focus-visible .sf-video-badge{transform:scale(1.08)}
.sf-video-play:focus-visible{outline:3px solid var(--accent,#fff);outline-offset:-6px}
.sf-video-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:15px;text-align:center;padding:20px}
.sf-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sf-quote{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:18px}
.sf-section.sf-alt .sf-quote{background:var(--bg)}
.sf-quote blockquote{margin:0;font-size:18px;line-height:1.55}
.sf-quote figcaption{font-weight:600}
.sf-quote figcaption span{display:block;font-weight:400;color:var(--muted);font-size:15px}
.sf-stars{color:var(--accent-text);letter-spacing:2px;font-size:18px}
.sf-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.sf-plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:14px}
.sf-section.sf-alt .sf-plan{background:var(--bg)}
.sf-plan.sf-featured{border:2px solid var(--accent);box-shadow:0 24px 48px -32px rgba(0,0,0,.4)}
.sf-plan h3{font-size:22px}
.sf-plan .sf-amount{font-family:var(--display);font-size:clamp(34px,4vw,46px);font-weight:700;line-height:1;color:var(--ink)}
.sf-plan .sf-amount small{font-size:15px;font-weight:500;color:var(--muted);font-family:var(--body)}
.sf-plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;flex:1}
.sf-plan li{padding-left:26px;position:relative}
.sf-plan li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:7px;border-left:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);transform:rotate(-45deg)}
.sf-faq{max-width:820px;border-top:1px solid var(--line)}
.sf-faq details{border-bottom:1px solid var(--line);padding:4px 0}
.sf-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:16px 0;font-weight:600;font-size:clamp(17px,1.6vw,20px)}
.sf-faq summary::-webkit-details-marker{display:none}
.sf-faq summary::after{content:"+";font-size:24px;line-height:1;color:var(--accent-text)}
.sf-faq details[open] summary::after{content:"\2212"}
.sf-faq details>div{padding:0 0 18px;color:var(--muted);max-width:68ch}
.sf-map{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.sf-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sf-social{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.sf-social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:600;font-size:15px}
.sf-social a:hover{border-color:currentColor}
.sf-social svg{width:18px;height:18px}
.sf-spacer{height:64px}
.sf-divider{border:0;border-top:1px solid var(--line);margin:32px 0}
form.sf-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,36px);display:grid;gap:16px;max-width:640px}
.sf-section.sf-alt form.sf-form,.alt form.sf-form{background:var(--bg)}
.sf-form label{display:grid;gap:6px;font-size:14px;font-weight:600}
.sf-form input,.sf-form textarea,.sf-form select{font:inherit;font-size:16px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);border-radius:min(var(--r),12px);background:var(--bg);color:var(--ink);width:100%}
.sf-form textarea{min-height:120px;resize:vertical}
.sf-form .btn{justify-self:start}
.sf-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.sf-form-status{font-size:15px;font-weight:600;min-height:1em}
.sf-form-status[data-tone=ok]{color:var(--accent-text)}
.sf-credits{font-size:12px;opacity:.75;margin-top:10px;grid-column:1/-1}
.sf-credits a{text-decoration:underline}
.sf-empty-menu{opacity:.6;font-size:14px}
@media (max-width:880px){.sf-cols,.sf-cols.sf-3,.sf-quotes,.sf-prices{grid-template-columns:1fr}.sf-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.sf-gallery{grid-template-columns:1fr}}
/* A section with a picture behind it (owner, 10 Oct 2026). The picture is a real <img> layer, not a CSS background, so it gets
   srcset and lazy loading like any picture. Everything is a class, so it survives the editor's save and the export:
   sf-has-bg on the section; sf-bg-h60 / h80 / h100 for the height; sf-bg-ondark when the overlay is dark (light text);
   sf-bg-parallax to opt in to a slow scroll effect; on the picture sf-pos-{t|c|b}{l|c|r} for the focal point; on the
   overlay sf-ov-{dark|light|accent} for its colour and sf-ov-0..9 for how strong (0 to 90%). */
.sf-has-bg{position:relative;isolation:isolate;overflow:hidden}
.sf-has-bg>.sf-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sf-bg-img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
.sf-bg-overlay{position:absolute;inset:0;display:block;background:var(--band,#0C0D0C);opacity:.4}
.sf-ov-light{background:var(--bg,#fff)}.sf-ov-accent{background:var(--accent,#0C0D0C)}.sf-ov-dark{background:var(--band,#0C0D0C)}
.sf-ov-0{opacity:0}.sf-ov-1{opacity:.1}.sf-ov-2{opacity:.2}.sf-ov-3{opacity:.3}.sf-ov-4{opacity:.4}.sf-ov-5{opacity:.5}.sf-ov-6{opacity:.6}.sf-ov-7{opacity:.7}.sf-ov-8{opacity:.8}.sf-ov-9{opacity:.9}
.sf-pos-tl{object-position:0 0}.sf-pos-tc{object-position:50% 0}.sf-pos-tr{object-position:100% 0}
.sf-pos-cl{object-position:0 50%}.sf-pos-cc{object-position:50% 50%}.sf-pos-cr{object-position:100% 50%}
.sf-pos-bl{object-position:0 100%}.sf-pos-bc{object-position:50% 100%}.sf-pos-br{object-position:100% 100%}
.sf-bg-h60,.sf-bg-h80,.sf-bg-h100{display:flex;flex-direction:column;justify-content:center}
:where(.sf-bg-h60,.sf-bg-h80,.sf-bg-h100)>:where(.w){width:min(100% - 40px,1200px);margin-inline:auto}   /* only if the design's own .w has no width: :where() adds no weight, so the design wins */
.sf-bg-h60{min-height:60vh}.sf-bg-h80{min-height:80vh}.sf-bg-h100{min-height:100vh}
.sf-bg-ondark,.sf-bg-ondark h1,.sf-bg-ondark h2,.sf-bg-ondark h3,.sf-bg-ondark .lead,.sf-bg-ondark p{color:#fff}
@media (prefers-reduced-motion:no-preference){
  .sf-bg-parallax>.sf-bg{clip-path:inset(0)}
  .sf-bg-parallax>.sf-bg .sf-bg-img{position:fixed;top:0;left:0;width:100%;height:100vh}
  .sf-bg-parallax>.sf-bg .sf-bg-overlay{position:fixed;top:0;left:0;width:100%;height:100vh}
}


/* Animation presets (App\Sites\Animations; public/site-runtime/sf-runtime.js). Elements wait out of sight only while
   the runtime is starting (html.sf-motion, set only when the visitor allows motion); the runtime then shows them. */
.sf-motion [data-sf-anim]:not(.sf-ready):not([data-sf-anim="marquee"]):not([data-sf-anim="counter"]):not([data-sf-anim="magnetic"]):not([data-sf-anim="parallax"]){visibility:hidden}
[data-sf-anim="parallax"]{overflow:hidden}
[data-sf-anim="parallax"]>img{will-change:transform}
.sf-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.sf-wi{display:inline-block;will-change:transform}
.sf-marquee{display:flex;overflow:hidden;gap:0}
.sf-marquee-track{flex:none;min-width:100%;display:flex;align-items:center;justify-content:space-around;gap:clamp(32px,6vw,72px);padding-right:clamp(32px,6vw,72px)}
[data-sf-anim="magnetic"] .btn,[data-sf-anim="magnetic"].btn{will-change:transform}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  [data-sf-anim]{opacity:1!important;visibility:visible!important;transform:none!important}
  .sf-marquee{overflow:visible;flex-wrap:wrap}.sf-marquee-track[aria-hidden]{display:none}
}


.sf-free-badge{display:flex!important;visibility:visible!important;opacity:1!important;position:static!important;transform:none!important;clip:auto!important;clip-path:none!important;height:auto!important;max-height:none!important;overflow:visible!important}
.sf-free-badge a{display:inline!important;visibility:visible!important;opacity:1!important;position:static!important;transform:none!important;clip:auto!important;height:auto!important;width:auto!important}
@font-face{font-family:"Young Serif";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/young-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/outfit-latin-wght-normal.woff2) format("woff2")}