:root{
    --paper:#F7F4EE; --paper-2:#F1ECE2; --card:#FCFAF5;
    --ink:#23302B; --ink-soft:#4B564F; --muted:#7C8078;
    --pine:#2E4A40; --pine-deep:#1E332C;
    --gold:#A2823C; --gold-soft:#C8A85E;
    --line:#E1D9CB; --line-2:#D3C9B7;
    --pine-rgb:46,74,64; --pine-deep-rgb:30,51,44; --shade-rgb:20,35,30; --backdrop-rgb:23,40,35;
    --gold-rgb:162,130,60; --gold-soft-rgb:200,168,94; --paper-rgb:247,244,238; --on-gold:#241d0c;
    --sans:"Manrope", system-ui, -apple-system, sans-serif;
    --serif:"Cormorant", Georgia, "Times New Roman", serif;
    --mw:1180px;
    --arch:170px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16.5px; line-height:1.66; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
  .wrap{max-width:var(--mw); margin:0 auto; padding:0 30px}
  img{max-width:100%}
  a{color:inherit; text-decoration:none}
  h1,h2,h3{font-family:var(--serif); font-weight:500; margin:0; line-height:1.08; letter-spacing:.002em; color:var(--ink)}
  p{margin:0}
  .serif-it{font-family:var(--serif); font-style:italic; font-weight:500}
  .kicker{font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold)}
  .rule{width:54px; height:1px; background:var(--gold); border:none}

  /* buttons / links */
  .lnk{font-family:var(--sans); font-weight:600; font-size:.86rem; letter-spacing:.03em; display:inline-flex; align-items:center; gap:10px; padding:8px 0 4px; border-bottom:1.5px solid var(--gold); color:var(--ink)}
  .lnk:hover{color:var(--pine)}
  .btn{font-family:var(--sans); font-weight:600; font-size:.88rem; letter-spacing:.02em; display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:2px; background:var(--pine); color:var(--paper); border:1px solid var(--pine); transition:background .2s, color .2s}
  .btn:hover{background:var(--pine-deep)}
  .btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
  .btn.ghost:hover{border-color:var(--pine); color:var(--pine)}

  /* top bar */
  .top{position:sticky; top:0; z-index:30; background:var(--paper); background:color-mix(in srgb,var(--paper) 90%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
  .top .in{display:flex; align-items:center; gap:30px; height:78px}
  .brand{font-family:var(--serif); font-weight:600; font-size:1.7rem; letter-spacing:.01em; color:var(--ink); line-height:1}
  .brand small{display:block; font-family:var(--sans); font-weight:600; font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-top:4px}
  .top nav{display:flex; gap:30px; margin:0 auto}
  .top nav a{font-family:var(--sans); font-size:.83rem; font-weight:500; letter-spacing:.04em; color:var(--ink-soft); position:relative; padding:4px 0}
  .top nav a:hover{color:var(--pine)}
  .top .contact{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-size:.83rem; font-weight:600; color:var(--ink); padding:10px 16px; border:1px solid var(--line-2); border-radius:2px; transition:border-color .2s, color .2s, background .2s}
  .top .contact svg{width:15px; height:15px; fill:none; stroke:var(--gold); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
  .top .contact:hover{border-color:var(--gold); color:var(--pine); background:var(--card)}
  @media(max-width:960px){.top nav,.top .contact{display:none}}

  /* hero */
  .hero{padding:78px 0 30px}
  .hero .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center}
  @media(max-width:900px){.hero .grid{grid-template-columns:1fr; gap:40px} .hero{padding:46px 0 20px} .frame{max-width:520px; margin:0 auto} .frame .tag{left:12px}}
  .hero h1{font-size:clamp(3rem,2rem + 4.6vw,5.4rem); font-weight:500}
  .hero h1 em{font-style:italic; color:var(--pine)}
  .hero .lead{font-size:1.12rem; color:var(--ink-soft); max-width:33em; margin:26px 0 30px}
  .hero .acts{display:flex; gap:26px; align-items:center; flex-wrap:wrap; margin-top:34px}
  .frame{position:relative}
  .frame .ph{aspect-ratio:4/5; border-radius:var(--arch) var(--arch) 8px 8px; background-size:cover; background-position:center; box-shadow:0 30px 60px -30px rgba(var(--pine-deep-rgb),.5); border:1px solid var(--line-2)}
  .frame::after{content:""; position:absolute; inset:14px 14px auto 14px; height:calc(100% - 28px); border-radius:calc(var(--arch) - 12px) calc(var(--arch) - 12px) 3px 3px; border:1px solid rgba(var(--gold-soft-rgb),.5); pointer-events:none}
  .frame .tag{position:absolute; left:-26px; bottom:44px; background:var(--card); border:1px solid var(--line); padding:16px 20px; box-shadow:0 16px 40px -20px rgba(var(--pine-deep-rgb),.4)}
  .frame .tag b{font-family:var(--serif); font-size:1.9rem; font-weight:600; color:var(--pine); display:block; line-height:1}
  .frame .tag span{font-family:var(--sans); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}

  /* values strip */
  .values{border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:40px}
  .values .in{display:flex; justify-content:center; gap:0; flex-wrap:wrap}
  .values .v{display:flex; align-items:center; gap:16px; padding:22px 40px; font-family:var(--sans); font-size:.9rem; color:var(--ink-soft)}
  .values .v b{font-family:var(--serif); font-size:1.05rem; color:var(--ink); font-weight:600}
  .values .v:not(:last-child){border-right:1px solid var(--line)}
  @media(max-width:960px){.values .v{padding:16px 22px} .values .v:not(:last-child){border-right:none}}

  section{padding:92px 0}
  .sec-k{display:flex; align-items:center; gap:16px; margin-bottom:22px}
  .sec-k .kicker{white-space:nowrap}
  .sec-k .rule{flex:1; width:auto; background:var(--line-2)}

  /* editorial intro */
  .intro{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start}
  @media(max-width:860px){.intro{grid-template-columns:1fr; gap:30px}}
  .intro h2{font-size:clamp(1.8rem,1rem + 2.7vw,2.9rem); font-weight:500}
  .intro .body p{color:var(--ink-soft); margin-bottom:1.1em}
  .intro .body p:first-child{font-size:1.16rem; color:var(--ink)}

  /* quote */
  .quote{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .quote .in{max-width:940px; margin:0 auto; text-align:center; position:relative}
  .quote .mark{font-family:var(--serif); font-size:6rem; color:var(--gold-soft); line-height:.6; height:.5em; display:block}
  .quote blockquote{font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,1.3rem + 2vw,2.7rem); line-height:1.28; color:var(--pine); margin:14px 0 24px}
  .quote cite{font-family:var(--sans); font-style:normal; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

  /* services list */
  .svc-h{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:20px}
  .svc-h h2{font-size:clamp(1.8rem,1rem + 2.7vw,3rem)}
  .slist{border-top:1px solid var(--line-2)}
  .srow{display:grid; grid-template-columns:76px 1fr auto; gap:26px; align-items:baseline; padding:28px 6px; border-bottom:1px solid var(--line); transition:padding-left .25s ease, background .25s}
  .srow .no{font-family:var(--serif); font-size:1.7rem; color:var(--gold); font-weight:600}
  .srow h3{font-size:1.5rem; font-weight:500}
  .srow p{font-family:var(--sans); font-size:.92rem; color:var(--muted); margin-top:7px; max-width:46em}
  .srow .go{font-family:var(--sans); font-size:1.3rem; color:var(--line-2); align-self:center; transition:color .2s, transform .2s}
  /* hover shift only on pointer devices, so a tap does not leave a row stuck in its hover state */
  @media(hover:hover){.srow:hover{background:var(--card); padding-left:20px} .srow:hover .go{color:var(--gold); transform:translateX(4px)}}
  @media(max-width:640px){.srow{grid-template-columns:40px 1fr; gap:14px; padding:22px 2px} .srow h3{font-size:1.35rem} .srow .no{font-size:1.45rem} .srow .go{display:none}}
  @media(max-width:640px) and (hover:hover){.srow:hover{padding-left:10px}}

  /* space band */
  .space{position:relative; border-radius:6px; overflow:hidden; min-height:520px; display:flex; align-items:flex-end; background-size:cover; background-position:center; box-shadow:0 30px 60px -34px rgba(var(--pine-deep-rgb),.5)}
  .space .veil{position:absolute; inset:0; background:linear-gradient(120deg, rgba(var(--shade-rgb),.78) 0%, rgba(var(--shade-rgb),.32) 55%, rgba(var(--shade-rgb),.05) 100%)}
  .space .card{position:relative; z-index:2; max-width:480px; padding:44px; color:var(--paper)}
  .space .kicker{color:var(--gold-soft)}
  .space h2{color:var(--paper); font-size:2.4rem; font-weight:500; margin:16px 0 14px}
  .space p{color:rgba(var(--paper-rgb),.86); font-size:1.02rem}

  /* team */
  .team{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:12px}
  .team .mem{padding:26px 24px; gap:18px} .team .mono{width:62px; height:62px; font-size:1.35rem} .team .mem h3{font-size:1.38rem}
  @media(max-width:1000px){.team{grid-template-columns:1fr 1fr}}
  @media(max-width:640px){.team{grid-template-columns:1fr}}
  .mem{display:flex; gap:22px; align-items:center; padding:30px; background:var(--card); border:1px solid var(--line)}
  .mono{width:70px; height:70px; border-radius:50%; flex:none; display:grid; place-items:center; border:1px solid var(--gold); color:var(--gold); font-family:var(--serif); font-size:1.5rem; font-weight:600; background:var(--paper)}
  .mem h3{font-size:1.5rem; font-weight:500}
  .mem p{font-family:var(--sans); font-size:.88rem; color:var(--muted); margin-top:4px}

  /* cta */
  .cta{text-align:center; background:var(--pine); color:var(--paper); border-radius:6px; padding:74px 40px}
  .cta .kicker{color:var(--gold-soft)}
  .cta h2{color:var(--paper); font-size:clamp(2.2rem,1.6rem + 2.6vw,3.4rem); font-weight:500; margin:16px auto 18px; max-width:16em}
  .cta p{color:rgba(var(--paper-rgb),.8); max-width:34em; margin:0 auto 32px}
  .cta .btn{background:var(--gold); border-color:var(--gold); color:var(--on-gold)}
  .cta .btn:hover{background:var(--gold-soft)}
  .cta .ph{font-family:var(--serif); font-size:1.4rem; margin-top:26px; color:var(--paper)}

  footer{padding:56px 0 44px; border-top:1px solid var(--line)}
  .foot{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start}
  .foot-brand{max-width:320px}
  .foot .brand{display:inline-block; font-family:var(--serif); font-size:2.3rem; color:var(--ink); padding:0; line-height:1}
  .foot .brand small{font-size:.62rem; margin-top:8px}
  .foot .foot-tagline{margin:18px 0 0; font-size:.86rem; line-height:1.65; color:var(--muted); padding:0}
  .foot .cols{display:flex; gap:56px; flex-wrap:wrap}
  .foot h3,.foot h4{font-family:var(--sans); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 12px}
  .foot a,.foot p{display:block; font-family:var(--sans); font-size:.9rem; color:var(--ink-soft); padding:3px 0}
  .foot a{padding:7px 0}
  .foot-bot{margin-top:40px; padding-top:22px; border-top:1px solid var(--line); font-family:var(--sans); font-size:.8rem; color:var(--muted); line-height:1.7}
  .foot-bot .part{white-space:nowrap}
  /* loader */
  .loader{position:fixed; inset:0; z-index:9999; background:var(--paper); display:grid; place-items:center; transition:opacity .6s ease, visibility .6s}
  .loader.done{opacity:0; visibility:hidden}
  .loader .lw{font-family:var(--serif); font-weight:600; font-size:clamp(2.4rem,6vw,3.4rem); color:var(--ink); letter-spacing:.02em; text-align:center; opacity:0; animation:lfade .9s ease forwards}
  .loader .lsub{font-family:var(--sans); font-weight:600; font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-top:12px; text-align:center; opacity:0; animation:lfade .9s ease .2s forwards}
  .loader .lline{width:0; height:1px; background:var(--gold); margin:24px auto 0; animation:lgrow 1.2s ease .4s forwards}
  @keyframes lfade{to{opacity:1}}
  @keyframes lgrow{to{width:130px}}

  /* centri */
  .locs{display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-top:10px}
  @media(max-width:760px){.locs{grid-template-columns:1fr}}
  .loc{padding:28px 0 0; border-top:2px solid var(--gold)}
  .loc .lc{font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
  .loc h3{font-family:var(--serif); font-size:1.7rem; font-weight:500; margin-bottom:10px}
  .loc a.tel{display:inline-block; font-family:var(--sans); font-weight:600; font-size:1rem; color:var(--pine); border-bottom:1.5px solid var(--gold); padding:8px 0 4px}
  .loc a.tel:hover{color:var(--gold)}

  @media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto} .loader .lw,.loader .lsub{animation:none; opacity:1} .loader .lline{animation:none; width:130px}}
  /* modal */
  .modal{position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:20px; overflow-y:auto; overscroll-behavior:contain}
  .modal.open{display:flex}
  .modal-back{position:absolute; inset:0; background:rgba(var(--backdrop-rgb),.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); touch-action:none; cursor:pointer; animation:mfade .25s ease}
  .modal-card{position:relative; width:100%; max-width:520px; max-height:100%; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 40px 90px -34px rgba(var(--backdrop-rgb),.6); padding:38px; animation:mpop .28s cubic-bezier(.2,.8,.3,1)}
  .modal-x{position:absolute; top:18px; right:18px; width:36px; height:36px; border:1px solid var(--line); background:var(--paper); border-radius:6px; cursor:pointer; font-size:1.2rem; color:var(--muted); line-height:1}
  .modal-x:hover{color:var(--pine); border-color:var(--gold)}
  .modal-card h3{font-family:var(--serif); font-weight:500; font-size:2rem; margin:12px 0 8px}
  .modal-sub{font-family:var(--sans); color:var(--ink-soft); font-size:.92rem; margin-bottom:22px}
  .fld{display:flex; flex-direction:column; gap:6px; margin-bottom:15px}
  .fld span{font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--ink)}
  .fld input,.fld select,.fld textarea{font-family:var(--sans); font-size:.98rem; padding:12px 13px; border:1px solid var(--line-2); border-radius:4px; background:#fff; color:var(--ink); width:100%; resize:vertical}
  .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none; border-color:var(--pine); box-shadow:0 0 0 3px rgba(var(--pine-rgb),.1)}
  .fld-row{display:grid; grid-template-columns:1fr 1fr; gap:13px}
  @media(max-width:480px){.fld-row{grid-template-columns:1fr}}
  .modal-card form .btn{width:100%; justify-content:center; margin-top:6px}
  .modal-note{font-family:var(--sans); font-size:.76rem; color:var(--muted); margin-top:14px; text-align:center}
  .modal-success{text-align:center; padding:16px 0}
  .modal-success .ok{width:66px; height:66px; border-radius:50%; background:rgba(var(--gold-rgb),.14); color:var(--gold); display:grid; place-items:center; font-size:2rem; margin:0 auto 18px}
  .modal-success h3{margin-bottom:8px}
  .modal-success p{font-family:var(--sans); color:var(--ink-soft); max-width:30em; margin:0 auto 22px}
  @keyframes mfade{from{opacity:0}}
  @keyframes mpop{from{opacity:0; transform:translateY(14px) scale(.98)}}
  @media(prefers-reduced-motion:reduce){.modal-back,.modal-card{animation:none}}

  /* hamburger */
  .hamb{display:none; margin-left:auto; flex:none; width:44px; height:44px; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:transparent; border:1px solid var(--line); border-radius:4px; cursor:pointer}
  .hamb span{display:block; width:22px; height:1.5px; background:var(--ink)}
  .hamb:hover{border-color:var(--pine)}
  .hamb:hover span{background:var(--pine)}
  @media(max-width:960px){.hamb{display:flex}}

  /* side drawer */
  .drawer-back{position:fixed; inset:0; z-index:900; background:rgba(var(--backdrop-rgb),.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); touch-action:none; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .32s ease}
  .drawer-back.open{opacity:1; pointer-events:auto}
  .drawer{position:fixed; top:0; right:0; z-index:901; width:min(88vw,380px); height:100vh; height:100dvh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; padding:18px 26px 28px; background:var(--paper); border-left:1px solid var(--line); box-shadow:-30px 0 60px -30px rgba(var(--pine-deep-rgb),.35); transform:translateX(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1)}
  .drawer.open{transform:translateX(0)}
  .drawer[hidden],.drawer-back[hidden]{display:none}
  .drawer-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--line)}
  .drawer-top .kicker{display:block; margin-bottom:10px}
  .drawer-top .brand{font-size:1.5rem}
  .drawer-x{position:relative; flex:none; width:40px; height:40px; padding:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--muted); font-family:var(--sans); font-size:1.4rem; line-height:1; cursor:pointer; transition:color .2s, border-color .2s}
  .drawer-x::after{content:""; position:absolute; inset:-4px}
  .drawer-x:hover{color:var(--pine); border-color:var(--pine)}
  .drawer nav{display:flex; flex-direction:column; margin:0}
  .drawer nav a{font-family:var(--serif); font-size:1.55rem; font-weight:500; line-height:1.2; color:var(--ink); display:flex; align-items:center; min-height:44px; padding:15px 0; border-bottom:1px solid var(--line); transition:color .2s}
  .drawer nav a:hover{color:var(--pine)}
  .drawer-foot{margin-top:auto; padding-top:26px}
  .drawer-foot .btn{width:100%; justify-content:center}
  .drawer-tel{display:block; font-family:var(--sans); font-weight:600; font-size:1.05rem; color:var(--ink); margin-top:18px; padding:8px 0}
  .drawer-locs{font-family:var(--sans); font-size:.82rem; color:var(--muted); margin-top:4px}

  /* mobile */
  body{overflow-x:hidden} html,body{overflow-x:clip}
  @media(max-width:960px){.fld input,.fld select,.fld textarea{font-size:16px} .modal-x{width:44px; height:44px}}
  @media(max-width:960px){.loc h3{font-size:1.45rem} .lnk,.loc a.tel{padding:12px 0 8px} .foot a{padding:10px 0}}
  @media(max-width:640px){section{padding:56px 0} footer{padding:40px 0 32px} .foot-bot{margin-top:30px}}
  @media(max-width:560px){.wrap{padding:0 22px} .top .in{height:64px; gap:16px} .top .brand{font-size:1.45rem} .top .brand small{font-size:.6rem; letter-spacing:.2em; margin-top:3px}}
  @media(max-width:560px){.hero{padding:30px 0 8px} .hero .grid{gap:34px} .hero h1{font-size:clamp(2.2rem,1.4rem + 5vw,3.2rem)} .hero .lead{font-size:1.02rem; margin:18px 0 22px} .hero .acts{margin-top:22px; gap:18px} .frame .tag{bottom:20px; padding:12px 16px} .frame .tag b{font-size:1.5rem}}
  @media(max-width:560px){.values{margin-top:26px} .values .in{flex-direction:column} .values .v{padding:13px 0; border-bottom:1px solid var(--line)} .values .v:last-child{border-bottom:none} .intro{gap:22px} .svc-h{flex-wrap:wrap}}
  @media(max-width:560px){.space{min-height:420px} .space .card{padding:28px} .space h2{font-size:1.8rem} .mem{padding:22px; gap:16px} .mono{width:56px; height:56px; font-size:1.3rem} .mem h3{font-size:1.35rem} .locs{gap:24px} .loc{padding-top:20px}}
  @media(max-width:560px){.cta{padding:32px 28px; border-radius:4px} .cta h2{font-size:1.8rem; margin:12px auto 14px} .cta p{margin-bottom:24px} .cta .ph{font-size:1.2rem; margin-top:20px} .foot{flex-direction:column; align-items:flex-start; gap:30px} .foot .cols{flex-direction:column; gap:22px}}
  @media(max-width:480px){.modal{padding:12px} .modal-card{padding:24px; border-radius:6px} .modal-x{top:12px; right:12px} .modal-card h3{font-size:1.75rem}}
  @media(max-width:960px){html{scroll-padding-top:80px}}
  /* scroll lock (root + body, since html carries overflow-x:clip and is the viewport-defining element); the gutter stays reserved so the header and page do not shift when the scrollbar hides */
  html{scrollbar-gutter:stable}
  html.lock,body.lock{overflow:hidden}
  /* space band: darken the bottom on small screens where the card spans the full width */
  @media(max-width:760px){.space .veil{background:linear-gradient(180deg, rgba(var(--shade-rgb),.12) 0%, rgba(var(--shade-rgb),.55) 45%, rgba(var(--shade-rgb),.86) 100%)}}


  /* mobile modal: card is a non-scrolling column, only the body scrolls, so the close control stays visible */
  @media(max-width:560px){
    .modal{padding:12px}
    .modal-card{display:flex; flex-direction:column; padding:0; overflow:hidden; max-height:94vh; max-height:min(94dvh, calc(100dvh - 24px)); border-radius:10px}
    .modal-card > #bmBody{flex:1 1 auto; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:60px 22px 22px}
    .modal-x{position:absolute; top:12px; right:12px; z-index:3}
    .fld-row{grid-template-columns:1fr}
    .fld input,.fld select,.fld textarea{font-size:16px}
    .modal-card form .btn,.modal-success .btn{width:100%; justify-content:center}
  }
  .modal-card{max-height:92vh; max-height:92dvh; overscroll-behavior:contain}
  .drawer{overscroll-behavior:contain}
  .drawer-back,.modal-back{touch-action:none}
  .drawer-back:not(.open){pointer-events:none}
  html{scrollbar-gutter:stable}

  @media(max-width:900px){.frame{width:100%; max-width:520px; margin:0 auto} .frame .tag{left:12px}}
  @media(max-width:960px){.loc h3{font-size:1.45rem} .lnk,.loc a.tel{padding:12px 0 8px} .foot a{padding:10px 0}}
  @media(max-width:560px){.top .brand small{font-size:.6rem; letter-spacing:.2em}}

  /* utisci (testimonials): arched cards, same silhouette as the hero frame */
  .tslider{position:relative; margin-top:10px}
  .track{display:flex; gap:26px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; padding:22px 2px 34px; margin:-22px -2px -34px; outline:none; -webkit-overflow-scrolling:touch}
  .track::-webkit-scrollbar{display:none}
  .track > .tcard{flex:0 0 calc((100% - 52px)/3); scroll-snap-align:start; margin:0}
  .track:focus-visible{outline:2px solid var(--pine); outline-offset:6px}
  .tnav{display:flex; align-items:center; justify-content:center; gap:22px; margin-top:26px}
  .tbtn{width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); background:var(--card); color:var(--ink); font-family:var(--sans); font-size:1.1rem; cursor:pointer; display:grid; place-items:center; padding:0; transition:border-color .2s, color .2s, transform .2s}
  .tbtn:hover{border-color:var(--gold); color:var(--pine)}
  .tbtn:active{transform:scale(.96)}
  .tdots{display:flex; gap:8px; align-items:center}
  .tdots button{width:8px; height:8px; padding:0; border:0; border-radius:100px; background:var(--line-2); cursor:pointer; transition:width .3s, background .3s}
  .tdots button[aria-selected="true"]{width:22px; background:var(--gold)}
  .tcard{position:relative; margin:0; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--arch) var(--arch) 0 0; padding:calc(var(--arch) - 50px) 30px 34px; text-align:center; transition:transform .3s ease, box-shadow .3s ease}
  .tcard::after{content:""; position:absolute; inset:12px 12px 0 12px; height:calc(100% - 12px); border-radius:calc(var(--arch) - 12px) calc(var(--arch) - 12px) 0 0; border:1px solid rgba(var(--gold-soft-rgb),.5); border-bottom:none; pointer-events:none}
  @media(hover:hover){.tcard:hover{transform:translateY(-4px); box-shadow:0 30px 60px -34px rgba(var(--pine-deep-rgb),.35)}}
  .tcard .stars{color:var(--gold); font-size:.82rem; letter-spacing:4px; padding-left:4px; margin-bottom:14px}
  .tcard blockquote{margin:0; font-family:var(--serif); font-style:italic; font-weight:500; font-size:1.32rem; line-height:1.42; color:var(--ink)}
  .tcard .who{margin-top:auto; padding-top:22px; display:flex; flex-direction:column; align-items:center; gap:8px}
  .tcard .who b{font-family:var(--sans); font-weight:600; font-size:.9rem; color:var(--ink)}
  .tcard .who .role{font-family:var(--sans); font-size:.8rem; color:var(--muted)}
  @media(max-width:1000px){.track{gap:18px} .track > .tcard{flex-basis:calc((100% - 18px)/2)} .tcard{padding:92px 22px 30px} .tcard blockquote{font-size:1.18rem}}
  @media(max-width:640px){.track > .tcard{flex-basis:100%}}
  /* narrow cards keep the shared --arch radius, which the browser clamps to a semicircle exactly as it does for the hero frame at 375px */
  @media(max-width:560px){.tcard{padding:100px 24px 28px}}
  @media(prefers-reduced-motion:reduce){.tcard:hover{transform:none} .track{scroll-behavior:auto}}

  /* centri: Google Maps embeds; the placeholder (pin, address) sits under the iframe on purpose, so a blocked embed still shows something useful. The link sits below the map, outside the iframe, so it stays clickable and focusable */
  .map{position:relative; margin-top:18px; aspect-ratio:4/3; border:1px solid var(--line-2); border-radius:6px; overflow:hidden; background:var(--paper-2)}
  .map-ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:20px; background-color:var(--paper-2); background-image:repeating-linear-gradient(0deg, transparent 0 23px, var(--line) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, var(--line) 23px 24px)}
  .map-pin{width:14px; height:14px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--gold); box-shadow:0 0 0 6px rgba(var(--gold-rgb),.15); margin-bottom:6px}
  .map-addr{font-family:var(--sans); font-size:.86rem; color:var(--ink-soft)}
  .map-link{font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--pine); border-bottom:1.5px solid var(--gold); padding-bottom:2px}
  .map-link:hover{color:var(--gold)}
  .gmap{position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; display:block}
  @media(max-width:560px){.locs{gap:30px}}

  /* front hero h1: motion.js wraps each word in a clipped .w so it can rise into place. The bottom padding keeps Cormorant descenders (g, p, j) from being cut, the top bleed keeps carons on capitals, the side bleed keeps the italic overhang; the negative margins keep the margin box at exactly one line. Hidden states and timing live in pages.css (html.motion) and motion.js */
  .hero h1 .w{display:inline-block; overflow:hidden; vertical-align:bottom; padding:.08em .06em .14em; margin:-.08em -.06em -.14em}
  .hero h1 .wi{display:inline-block}
  /* scroll progress hairline, header shadow past 80px */
  .progress{position:fixed; top:0; left:0; width:100%; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; z-index:40; pointer-events:none}
  header.top{transition:box-shadow .35s ease}
  .top.scrolled{box-shadow:0 10px 30px -22px rgba(var(--pine-deep-rgb),.35)}
  /* quote scrub: words start muted and turn pine as the section travels through the viewport */
  /* micro interactions: keyline glow on cards, soft map zoom, underline that grows from the left */
  .tcard::after{transition:border-color .4s ease}
  .gmap{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .lnk{position:relative}
  .lnk::after{content:""; position:absolute; left:0; right:0; bottom:-1.5px; height:1.5px; background:var(--pine); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  @media(hover:hover){.tcard:hover::after{border-color:rgba(var(--gold-soft-rgb),.9)} .map:hover .gmap{transform:scale(1.01)} .lnk:hover::after{transform:scaleX(1)}}
  @media (prefers-reduced-motion:reduce){
    .progress{display:none}
    .map:hover .gmap{transform:none}
    .frame,.frame .ph{will-change:auto}
  }
  /* centri: the Google Maps link lives below the map, outside the iframe, so a blocked embed still leaves it clickable and focusable */
  .loc > .map-link{display:inline-block; margin-top:14px; padding:6px 0 2px}
  @media(max-width:960px){.loc > .map-link{padding:10px 0 6px}}
  /* hero kicker: transforms are ignored on a plain inline span, as an inline-block it rises with its siblings */
  .hero .kicker{display:inline-block}
  /* space band parallax layer: a pseudo-element carries the same photo (background-image inherits from .space) with 32px of overscan above and below, so the 30px drift each way never uncovers the paper behind a cover-sized background. JS drives it through --sy on .space, without it nothing moves */
  .space::before{content:""; position:absolute; inset:-32px 0; background-image:inherit; background-size:cover; background-position:center; transform:translateY(var(--sy,0px)); pointer-events:none}
  :focus-visible{outline:2px solid var(--pine); outline-offset:3px}

/* photo hooks (were data URIs in the demo) */
.ph-hero{background-image:url('../img/blog1.jpg')}
.ph-space{background-image:url('../img/hero.jpg')}

  /* ---- Znak (dvoje dece iz table centra) ---- */
  :root{--mark:var(--pine)}
  .vig-mark{display:block; fill:currentColor}
  .brand.has-mark,.foot .brand.has-mark{display:inline-flex; align-items:center; gap:.38em}
  .brand .vig-mark{height:1.5em; width:auto; aspect-ratio:1586/1398; flex:none; color:var(--mark)}
  .brand-text{display:block}
  .loader .lmark{width:clamp(64px,9vw,84px); margin:0 auto 20px; color:var(--mark); opacity:0; animation:lfade .9s ease forwards}
  .loader .lmark .vig-mark{width:100%; height:auto}
  .loader .lw{animation-delay:.15s} .loader .lsub{animation-delay:.35s} .loader .lline{animation-delay:.55s}
  @media (prefers-reduced-motion:reduce){.loader .lmark{animation:none; opacity:1}}

  /* ---- Paleta: lavanda (boja sa table centra, #7670B3) ---- */
  :root[data-paleta="lavanda"]{
    --paper:#F7F5F3; --paper-2:#EFECF3; --card:#FCFBFA;
    --ink:#27233A; --ink-soft:#4B4763; --muted:#6F6B85;
    --pine:#524B94; --pine-deep:#3F3979;
    --gold:#6A64A8; --gold-soft:#C9C4EC;
    --line:#E4DFEA; --line-2:#D5CEDF;
    --pine-rgb:82,75,148; --pine-deep-rgb:45,40,80; --shade-rgb:32,28,58; --backdrop-rgb:30,27,50;
    --gold-rgb:106,100,168; --gold-soft-rgb:201,196,236; --paper-rgb:247,245,243; --on-gold:#FFFFFF;
    --mark:#7670B3;
  }
  :root[data-paleta="lavanda"] .cta .btn{background:var(--paper); border-color:var(--paper); color:var(--pine-deep)}
  :root[data-paleta="lavanda"] .cta .btn:hover{background:#fff; border-color:#fff}