/*
Theme Name: SYLA
Theme URI: https://syla.mhintelliforge.com
Description: SYLA brand theme for Urban Harvest — child of Hello Elementor. Carries the SYLA design system: Marcellus/Jost/IBM Plex Mono type, ivory-and-gold palette, nav, drawer, modal and section styles.
Author: Urban Harvest
Template: hello-elementor
Version: 1.0.0
Text Domain: syla-child
*/

/* ============ SYLA design system ============ */

  :root{
    /* palette drawn from the Urban Harvest colour-options render */
    --studio:#FBF8F2;          /* ivory backdrop */
    --studio-2:#F3EDE0;        /* raised panel */
    --studio-3:#EFE5D2;        /* card */
    --starlight:#221C15;       /* primary text (espresso) */
    --titanium:#6E6455;        /* secondary text (muted brown) */
    --gold:#B99560;            /* Gold finish — primary accent */
    --gold-deep:#8B6F3E;
    --line:rgba(34,28,21,0.12);
    --disp:'Marcellus', serif;
    --body:'Jost', sans-serif;
    --mono:'IBM Plex Mono', monospace;
    --radius:16px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;overflow-x:hidden;width:100%;}
  body{background:var(--studio);color:var(--starlight);font-family:var(--body);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1160px;margin:0 auto;padding:0 22px;}
  h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.08;letter-spacing:.01em;}
  .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px;margin-bottom:16px;}
  .eyebrow::before{content:'';width:22px;height:1px;background:var(--gold);}
  .btn{font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:.03em;padding:14px 30px;border-radius:100px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform .15s ease,background .2s ease,border-color .2s ease;}
  .btn:active{transform:scale(.97);}
  .btn-gold{background:var(--gold);color:#17130A;}
  .btn-gold:hover{background:var(--gold-deep);}
  .btn-line{background:transparent;color:var(--starlight);border:1px solid var(--line);}
  .btn-line:hover{border-color:var(--gold);color:var(--gold);}
  .cta-strip{display:flex;justify-content:center;padding:26px 22px;border-top:1px solid var(--line);}
  .cta-strip .btn{padding:11px 26px;font-size:14px;}

  /* ---------- demo popup ---------- */
  .modal-overlay{position:fixed;inset:0;background:rgba(34,28,21,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:200;opacity:0;pointer-events:none;transition:opacity .2s ease;}
  .modal-overlay.open{opacity:1;pointer-events:auto;}
  .modal-card{background:var(--studio);border:1px solid var(--line);border-radius:20px;max-width:460px;width:100%;max-height:88vh;overflow-y:auto;padding:36px 32px;position:relative;transform:translateY(14px) scale(.98);transition:transform .2s ease;}
  .modal-overlay.open .modal-card{transform:translateY(0) scale(1);}
  .modal-close{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--titanium);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .modal-close:hover{border-color:var(--gold);color:var(--gold);}
  .modal-card .sec-sub{margin-bottom:22px;}
  section{padding:96px 0;}
  .sec-h{font-size:clamp(28px,4vw,40px);max-width:560px;}
  .sec-sub{color:var(--titanium);font-size:16.5px;line-height:1.7;max-width:520px;margin-top:16px;}

  /* ---------- NAV ---------- */
  nav{position:sticky;top:0;z-index:50;background:rgba(251,248,242,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;}
  .nav-left{display:flex;align-items:center;gap:16px;}
  .logo{font-family:var(--disp);font-size:22px;letter-spacing:.28em;}
  .logo b{color:var(--gold);font-weight:400;}
  .nav-links{display:none;gap:32px;font-size:14px;font-weight:400;color:var(--titanium);}
  .nav-links a:hover{color:var(--starlight);}
  .nav-cta{display:none;}
  @media(min-width:880px){.nav-links{display:flex;}.nav-cta{display:inline-flex;padding:10px 22px;font-size:14px;}}

  /* burger — always on the left, opens the full section drawer at any width */
  .burger{width:38px;height:38px;flex:none;border:1px solid var(--line);border-radius:10px;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
  .burger:hover{border-color:var(--gold);}
  .burger span{width:17px;height:1.5px;background:var(--starlight);border-radius:2px;transition:background .15s ease;}
  .burger:hover span{background:var(--gold);}

  /* ---------- SITE DRAWER ---------- */
  .drawer-overlay{position:fixed;inset:0;background:rgba(34,28,21,.5);backdrop-filter:blur(2px);z-index:210;opacity:0;pointer-events:none;transition:opacity .22s ease;}
  .drawer-overlay.open{opacity:1;pointer-events:auto;}
  .drawer{position:fixed;top:0;left:0;bottom:0;width:min(310px,84vw);background:var(--studio);border-right:1px solid var(--line);box-shadow:30px 0 60px -30px rgba(0,0,0,.4);padding:22px 20px 26px;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .25s ease;}
  .drawer-overlay.open .drawer{transform:translateX(0);}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:8px;}
  .drawer-close{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--titanium);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .drawer-close:hover{border-color:var(--gold);color:var(--gold);}
  .drawer-links{display:flex;flex-direction:column;padding:10px 0;overflow-y:auto;}
  .drawer-links a{padding:12px 6px;font-size:15.5px;color:var(--starlight);border-bottom:1px solid var(--line);}
  .drawer-sub{display:flex;flex-direction:column;background:var(--studio-2);border-radius:10px;margin:2px 0 4px;padding:2px 0;}
  .drawer-sub a{padding:10px 6px 10px 22px;font-size:13.5px;color:var(--titanium);border-bottom:1px solid var(--line);position:relative;}
  .drawer-sub a::before{content:'\2013';position:absolute;left:6px;color:var(--gold);}
  .drawer-sub a:last-child{border-bottom:none;}
  .drawer-sub a:hover{color:var(--gold);}
  .drawer-links a:hover{color:var(--gold);}
  .drawer .btn-gold{margin-top:18px;}

  /* ---------- HERO ---------- */
  .hero{padding:84px 0 72px;position:relative;}
  .hero .wrap{display:grid;gap:56px;align-items:center;}
  @media(min-width:920px){.hero .wrap{grid-template-columns:1.05fr .95fr;}}
  .hero h1{font-size:clamp(40px,6vw,66px);}
  .hero h1 em{font-style:normal;color:var(--gold);}
  .hero p{color:var(--titanium);font-size:18px;line-height:1.7;margin:22px 0 34px;max-width:480px;}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
  .hero-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--titanium);margin-top:30px;text-transform:uppercase;}

  /* machine visual + finish picker — the signature */
  .stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:30px;}
  .stage-glow{position:absolute;inset:-10% -20%;background:radial-gradient(50% 45% at 50% 42%, rgba(194,165,107,.14), transparent 70%);pointer-events:none;}
  .machine{position:relative;width:min(250px,64vw);transition:filter .3s ease;}
  .m-body{border-radius:14px 14px 10px 10px;padding:10px 10px 14px;background:linear-gradient(115deg,var(--m-lite) 0%,var(--m-base) 42%,var(--m-dark) 100%);box-shadow:0 30px 60px -25px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.25);}
  .m-screen{background:#101012;border-radius:10px;aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(255,255,255,.06);}
  .m-screen .s-mark{font-family:var(--disp);letter-spacing:.3em;font-size:13px;color:var(--starlight);}
  .m-screen .s-line{font-size:9px;color:var(--titanium);font-family:var(--mono);letter-spacing:.12em;}
  .m-cups{display:flex;gap:8px;margin-top:2px;}
  .m-cups span{width:14px;height:18px;border-radius:2px 2px 4px 4px;display:block;}
  .m-cups span:nth-child(1){background:#D9A23B;} .m-cups span:nth-child(2){background:#B0486B;} .m-cups span:nth-child(3){background:#7A5A3C;}
  .m-bay{margin-top:10px;background:#0D0D0F;border-radius:8px;height:96px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;border:1px solid rgba(255,255,255,.05);}
  .m-cup{width:34px;height:44px;background:linear-gradient(#EFE9DC,#DDD5C2);border-radius:3px 3px 7px 7px;position:relative;}
  .m-cup::after{content:'SYLA';position:absolute;inset:auto 0 12px 0;text-align:center;font-family:var(--disp);font-size:6.5px;letter-spacing:.2em;color:#8A7A55;}
  .m-legs{display:flex;justify-content:space-between;padding:0 22px;margin-top:2px;}
  .m-legs i{width:10px;height:22px;background:linear-gradient(#C8C8CC,#7E7E84);border-radius:0 0 4px 4px;display:block;}
  .finishes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:300px;}
  .fin{width:26px;height:26px;border-radius:50%;cursor:pointer;border:1px solid rgba(255,255,255,.25);box-shadow:inset -2px -3px 6px rgba(0,0,0,.35), inset 2px 3px 6px rgba(255,255,255,.25);transition:transform .15s ease;position:relative;}
  .fin:hover{transform:scale(1.15);}
  .fin[aria-pressed="true"]{outline:2px solid var(--gold);outline-offset:3px;}
  .fin-name{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--titanium);}
  .fin-name b{color:var(--starlight);font-weight:500;}

  /* ---------- TICKER ---------- */
  .ticker{border-block:1px solid var(--line);padding:18px 0;overflow:hidden;white-space:nowrap;}
  .ticker-track{display:inline-flex;gap:48px;animation:slide 36s linear infinite;font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--titanium);}
  .ticker-track span b{color:var(--gold);font-weight:500;margin-right:48px;}
  @keyframes slide{to{transform:translateX(-50%);}}
  @media(prefers-reduced-motion:reduce){.ticker-track{animation:none;}}

  /* ---------- STEPS ---------- */
  .steps-grid{display:grid;gap:22px;margin-top:52px;}
  @media(min-width:820px){.steps-grid{grid-template-columns:repeat(4,1fr);}}
  .step{background:var(--studio-2);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 28px;}
  .step .s-no{font-family:var(--disp);font-size:15px;color:var(--gold);letter-spacing:.2em;}
  .step h3{font-size:21px;margin:14px 0 10px;}
  .step p{color:var(--titanium);font-size:14.5px;line-height:1.65;}

  /* ---------- MENU ---------- */
  .menu{background:var(--studio-2);border-block:1px solid var(--line);}
  .ranges{display:grid;gap:22px;margin-top:52px;}
  @media(min-width:820px){.ranges{grid-template-columns:repeat(3,1fr);}}
  .range{background:var(--studio);border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:var(--radius);padding:28px 26px;}
  .range h3{font-size:22px;}
  .range .r-sub{color:var(--titanium);font-size:13.5px;margin-top:6px;}
  .range ul{list-style:none;margin-top:20px;}
  .range li{padding:9px 0;border-bottom:1px dashed var(--line);font-size:15px;color:var(--starlight);display:flex;justify-content:space-between;}
  .range li:last-child{border-bottom:none;}
  .range li i{font-style:normal;color:var(--titanium);font-family:var(--mono);font-size:11px;letter-spacing:.06em;}
  .ethnic{margin-top:26px;background:var(--studio);border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:var(--radius);padding:20px 26px;display:flex;gap:20px;align-items:baseline;flex-wrap:wrap;}
  .ethnic .e-tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;}
  .ethnic p{font-size:15.5px;color:var(--starlight);}
  .menu-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--titanium);margin-top:22px;}

  /* ---------- BUSINESS ---------- */
  .seg-grid{display:grid;gap:22px;margin-top:52px;}
  @media(min-width:820px){.seg-grid{grid-template-columns:repeat(3,1fr);} .seg-grid .seg:nth-child(4),.seg-grid .seg:nth-child(5){grid-column:span 1;}}
  .seg{border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;background:linear-gradient(160deg,var(--studio-2),var(--studio));}
  .seg h3{font-size:20px;}
  .seg p{color:var(--titanium);font-size:14.5px;line-height:1.65;margin-top:10px;}

  /* ---------- SPECS ---------- */
  .spec-strip{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:52px;}
  @media(min-width:720px){.spec-strip{grid-template-columns:repeat(4,1fr);}}
  .spec-cell{background:var(--studio-2);padding:26px 24px;}
  .spec-cell .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
  .spec-cell .v{font-family:var(--disp);font-size:22px;margin-top:10px;}
  .spec-cell .d{color:var(--titanium);font-size:13px;margin-top:6px;}

  /* ---------- PRICING ---------- */
  .price{background:var(--studio-2);border-block:1px solid var(--line);}
  .price-grid{display:grid;gap:22px;margin-top:52px;}
  @media(min-width:880px){.price-grid{grid-template-columns:1fr 1fr;}}
  .price-card{background:var(--studio);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;}
  .price-card .p-tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;}
  .price-card .p-amt{font-family:var(--disp);font-size:clamp(30px,4vw,40px);margin:14px 0 4px;}
  .price-card .p-amt small{font-family:var(--mono);font-size:12px;color:var(--titanium);letter-spacing:.1em;display:block;margin-top:6px;}
  .price-card ul{list-style:none;margin-top:20px;}
  .price-card li{padding:8px 0;color:var(--titanium);font-size:14.5px;display:flex;gap:10px;}
  .price-card li::before{content:'—';color:var(--gold);}
  .price-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--titanium);margin-top:22px;line-height:1.8;}


  /* ---------- FILM ---------- */
  .film-frame{margin-top:52px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#000;box-shadow:0 40px 80px -40px rgba(0,0,0,.8);}
  .film-frame video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#000;}
  .film-cap{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--titanium);margin-top:16px;}

  /* ---------- SYSTEM ---------- */
  .sys-grid{display:grid;gap:22px;margin-top:52px;}
  @media(min-width:880px){.sys-grid{grid-template-columns:repeat(3,1fr);}}
  .sys{background:var(--studio-2);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;position:relative;}
  .sys .sy-ic{width:46px;height:46px;border-radius:12px;border:1px solid rgba(194,165,107,.4);display:flex;align-items:center;justify-content:center;font-family:var(--disp);color:var(--gold);font-size:19px;margin-bottom:18px;background:rgba(194,165,107,.06);}
  .sys h3{font-size:21px;}
  .sys .sy-role{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:6px;}
  .sys p{color:var(--titanium);font-size:14.5px;line-height:1.7;margin-top:14px;}
  .sys-flow{margin-top:26px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(120deg,var(--studio-3),var(--studio-2));padding:24px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:15px;}
  .sys-flow b{font-weight:500;color:var(--starlight);}
  .sys-flow span{color:var(--titanium);}
  .sys-flow .arrow{color:var(--gold);font-family:var(--disp);}
  .sys-loop{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--titanium);margin-top:18px;line-height:1.9;}
  .sys-loop b{color:var(--gold);font-weight:500;}

  /* ---------- VISUAL MENU ---------- */
  .flav-grid{display:grid;gap:16px;margin-top:52px;grid-template-columns:repeat(2,1fr);}
  @media(min-width:720px){.flav-grid{grid-template-columns:repeat(3,1fr);}}
  @media(min-width:1000px){.flav-grid{grid-template-columns:repeat(4,1fr);}}
  .flav{background:var(--studio);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .18s ease,border-color .18s ease;}
  .flav:hover{transform:translateY(-3px);border-color:rgba(194,165,107,.5);}
  .flav .f-swirl{height:74px;position:relative;}
  .flav .f-swirl::after{content:'';position:absolute;inset:auto 0 0 0;height:26px;background:linear-gradient(transparent,var(--studio));}
  .flav .f-body{padding:14px 16px 16px;}
  .flav h4{font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:.01em;}
  .flav .f-cat{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--titanium);text-transform:uppercase;margin-top:4px;}
  .flav .f-dots{display:flex;gap:6px;margin-top:12px;}
  .flav .f-dots i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.05em;color:#17130A;background:var(--gold);border-radius:4px;padding:2px 6px;}
  .flav .f-dots i.off{background:transparent;color:var(--titanium);border:1px solid var(--line);}
  .eth-grid{display:grid;gap:16px;margin-top:22px;grid-template-columns:repeat(2,1fr);}
  @media(min-width:720px){.eth-grid{grid-template-columns:repeat(4,1fr);}}
  .menu-key{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--titanium);text-transform:uppercase;}
  .menu-key b{color:var(--gold);font-weight:500;}

  /* ---------- SPEC TABLE ---------- */
  .spec-table{margin-top:52px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
  .spec-row{display:grid;grid-template-columns:1fr 1.6fr;border-bottom:1px solid var(--line);}
  .spec-row:last-child{border-bottom:none;}
  .spec-row .sk{padding:16px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);background:var(--studio-2);}
  .spec-row .sv2{padding:16px 22px;font-size:15.5px;color:var(--starlight);}
  .spec-row .sv2 small{display:block;color:var(--titanium);font-size:13px;margin-top:3px;}

  /* ---------- COMMERCIALS ---------- */
  .comm-table{margin-top:32px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
  .comm-row{display:grid;grid-template-columns:1.6fr 1fr;border-bottom:1px solid var(--line);background:var(--studio);}
  .comm-row:last-child{border-bottom:none;}
  .comm-row.head{background:var(--studio-3);}
  .comm-row .ci{padding:15px 22px;font-size:15px;color:var(--starlight);}
  .comm-row .ci small{display:block;color:var(--titanium);font-size:12.5px;margin-top:3px;}
  .comm-row .cv{padding:15px 22px;font-family:var(--disp);font-size:18px;color:var(--gold);text-align:right;}
  .comm-row .cv small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--titanium);margin-top:3px;}
  .comm-row.head .ci,.comm-row.head .cv{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding:12px 22px;}

  /* ---------- BANNER ---------- */
  .banner .wrap{background:linear-gradient(120deg,#2A2317,#1E1B13);border:1px solid rgba(194,165,107,.35);border-radius:24px;padding:64px 32px;text-align:center;}
  .banner h2{font-size:clamp(30px,4.5vw,44px);}
  .banner p{color:var(--titanium);margin:16px auto 32px;max-width:440px;font-size:16.5px;line-height:1.7;}

  /* ---------- FAQ ---------- */
  details{border-bottom:1px solid var(--line);padding:20px 0;}
  details summary{cursor:pointer;font-size:17px;font-weight:400;list-style:none;display:flex;justify-content:space-between;align-items:center;}
  details summary::-webkit-details-marker{display:none;}
  details summary::after{content:'+';font-family:var(--disp);color:var(--gold);font-size:22px;transition:transform .2s ease;}
  details[open] summary::after{transform:rotate(45deg);}
  details p{color:var(--titanium);font-size:15px;line-height:1.7;margin-top:12px;max-width:640px;}


  /* ---------- V2 SECTIONS ---------- */
  .place-grid{display:grid;gap:22px;margin-top:52px;}
  @media(min-width:880px){.place-grid{grid-template-columns:1.1fr .9fr;}}
  .place-photo{border:1px solid var(--line);border-radius:20px;overflow:hidden;}
  .place-photo img{width:100%;height:100%;object-fit:cover;}
  .place-side{display:flex;flex-direction:column;gap:16px;}
  .place-card{background:var(--studio-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;}
  .place-card h3{font-size:18px;}
  .place-card p{color:var(--titanium);font-size:14px;line-height:1.65;margin-top:8px;}

  /* ---------- IN THE WILD: gallery ---------- */
  .gallery-grid{display:grid;gap:14px;margin-top:44px;grid-template-columns:repeat(2,1fr);grid-auto-rows:180px;}
  @media(min-width:640px){.gallery-grid{grid-auto-rows:220px;}}
  @media(min-width:880px){.gallery-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:260px;}}
  .gal-item{border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative;}
  .gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
  .gal-item:hover img{transform:scale(1.06);}
  .gal-big{grid-column:span 2;grid-row:span 2;}
  .place-side-row{flex-direction:column;margin-top:28px;}
  @media(min-width:820px){.place-side-row{flex-direction:row;}.place-side-row .place-card{flex:1;}}

  .check-grid{display:grid;gap:16px;margin-top:52px;grid-template-columns:1fr;}
  @media(min-width:820px){.check-grid{grid-template-columns:repeat(2,1fr);}}
  .check{display:flex;gap:16px;background:var(--studio-2);border:1px solid var(--line);border-radius:14px;padding:20px 22px;}
  .check .c-tick{width:26px;height:26px;flex-shrink:0;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:13px;}
  .check h4{font-family:var(--body);font-weight:500;font-size:15.5px;}
  .check p{color:var(--titanium);font-size:13.5px;line-height:1.6;margin-top:5px;}

  .reorder-steps{display:grid;gap:16px;margin-top:52px;}
  @media(min-width:820px){.reorder-steps{grid-template-columns:repeat(4,1fr);}}
  .ro{background:var(--studio);border:1px solid var(--line);border-radius:14px;padding:22px;}
  .ro .r-no{font-family:var(--disp);color:var(--gold);font-size:15px;letter-spacing:.15em;}
  .ro h4{font-family:var(--body);font-weight:500;font-size:15.5px;margin-top:12px;}
  .ro p{color:var(--titanium);font-size:13.5px;line-height:1.6;margin-top:6px;}

  .dl-row{display:grid;gap:16px;margin-top:52px;}
  @media(min-width:820px){.dl-row{grid-template-columns:repeat(3,1fr);}}
  .dl{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--studio-2);border:1px solid var(--line);border-radius:14px;padding:22px 24px;transition:border-color .18s ease;}
  .dl:hover{border-color:var(--gold);}
  .dl h4{font-family:var(--body);font-weight:500;font-size:15.5px;}
  .dl small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--titanium);margin-top:5px;text-transform:uppercase;}
  .dl .d-ar{font-family:var(--disp);color:var(--gold);font-size:20px;}

  .comp-grid{display:grid;gap:16px;margin-top:52px;}
  @media(min-width:820px){.comp-grid{grid-template-columns:repeat(3,1fr);}}
  .comp{background:var(--studio-2);border:1px solid var(--line);border-radius:14px;padding:24px;}
  .comp h4{font-family:var(--body);font-weight:500;font-size:15.5px;}
  .comp p{color:var(--titanium);font-size:13.5px;line-height:1.65;margin-top:8px;}
  .comp .c-id{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--gold);margin-top:12px;text-transform:uppercase;}

  .about{background:var(--studio-2);border-block:1px solid var(--line);}
  .about p.big{font-family:var(--disp);font-size:clamp(20px,2.8vw,27px);line-height:1.5;max-width:820px;margin-top:26px;}
  .about p.big em{font-style:normal;color:var(--gold);}

  .contact-grid{display:grid;gap:28px;margin-top:52px;}
  @media(min-width:880px){.contact-grid{grid-template-columns:1fr 1fr;}}
  .form-card{background:var(--studio-2);border:1px solid var(--line);border-radius:20px;padding:30px 28px;}
  .form-card label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--titanium);margin:18px 0 8px;}
  .form-card label:first-of-type{margin-top:0;}
  .form-card input,.form-card select{width:100%;background:var(--studio);border:1px solid var(--line);border-radius:10px;padding:13px 14px;color:var(--starlight);font-family:var(--body);font-size:15px;font-weight:300;}
  .form-card input:focus,.form-card select:focus{outline:none;border-color:var(--gold);}
  .form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;}
  .btn-wa{background:#1FAF5F;color:#fff;}
  .btn-wa:hover{background:#189A52;}
  .contact-side .place-card{margin-bottom:16px;}

  /* ---------- FOOTER ---------- */
  footer{border-top:1px solid var(--line);padding:56px 0 40px;}
  .foot-grid{display:grid;gap:32px;}
  @media(min-width:820px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;}}
  .foot-tag{font-family:var(--disp);font-size:19px;margin-top:14px;color:var(--titanium);}
  .foot-h{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;}
  .foot-l{display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:var(--titanium);}
  .foot-l a:hover{color:var(--starlight);}
  .foot-base{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--titanium);}
  :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;}

/* ============ WordPress / Elementor integration ============ */

/* Hello Elementor wraps content in .site-main with padding; the design's
   sections are full-bleed and manage their own rhythm. */
.syla-page .site-main,
.syla-page .page-content,
.syla-page .entry-content {
  margin: 0;
  padding: 0;
  max-width: none;
}

/* Elementor containers must not re-introduce a max-width, the .wrap does that. */
.syla-page .elementor-section,
.syla-page .e-con,
.syla-page .e-con-inner {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Hello Elementor ships a header/footer we don't want — the design has its own. */
.syla-page .site-header,
.syla-page .site-footer {
  display: none;
}

/* The HTML widget adds a wrapper that would break the sticky nav's stacking. */
.syla-page .elementor-widget-html,
.syla-page .elementor-widget-container {
  position: static;
}


/* ============ Demo request form ============ */
.syla-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.syla-status {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.55;
  font-family: var(--body);
}
.syla-status:empty { display: none; }
.syla-status[data-state="ok"]    { color: var(--gold-deep); }
.syla-status[data-state="error"] { color: #A6382E; }

.syla-submit[disabled] { opacity: .6; cursor: default; }

/* The action row now holds three buttons — let it wrap gracefully. */
.form-actions { flex-wrap: wrap; gap: 10px; }

/* ============ Fixed site header ============ ------------------------------
   The design declares `position: sticky` on <nav>. That cannot work here for
   two reasons: Elementor wraps every block in its own container, and a sticky
   element can only travel inside its parent's box — the nav's wrapper is
   exactly nav-height, so there is nowhere to travel. Separately, the design's
   `overflow-x: hidden` on <body> makes the body a scroll container, which
   detaches sticky from the viewport.

   Fixed positioning gives the same visual result and is immune to both. The
   wrapper keeps the nav's height so the page below does not jump up. */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

/* Wrapper reserves the header's height in normal flow. */
.syla-nav-bar {
  min-height: 68px;
  flex-shrink: 0;
}

/* The drawer and its overlay are fixed already; their wrapper must not
   reserve any space. */
.syla-drawer-host {
  min-height: 0;
  height: 0;
}

/* Anchor targets must clear the fixed header when jumped to. */
section[id],
div[id] {
  scroll-margin-top: 76px;
}

/* Logged-in admin bar sits above the header. */
.admin-bar nav { top: 32px; }
.admin-bar .syla-nav-bar { min-height: 68px; }
@media screen and (max-width: 782px) {
  .admin-bar nav { top: 46px; }
}

/* ============ Standalone pages ============ -------------------------------
   Film / The System / Menu / Specs open straight into a section with no hero
   above it, so the first section needs breathing room under the header. */

.syla-subpage section {
  padding-top: 120px;
}

/* Beats the inline padding-top some sections carry from the source design. */
.syla-subpage section[style*="padding-top"] {
  padding-top: 120px !important;
}

/* Give the subpages a little more room before the footer too. */
.syla-subpage footer {
  margin-top: 24px;
}