/* ============================================================
   base.css: the shared kit for the Web Wizard example sites.
   Structure, accessibility and interaction states only. Every look
   (colour, type, shape, layout personality) lives in theme.css, which
   sets the tokens below and adds the site's own components.
   Mobile first: base rules are the phone layout, min-width adds more.
   ============================================================ */
@layer reset, base, layout, components, theme, utilities;

@layer reset {
  *,*::before,*::after{box-sizing:border-box}
  *{margin:0}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable;overflow-x:clip}
  img,svg,video,canvas{display:block;max-width:100%}
  img{height:auto}
  input,button,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
  button{background:none;border:0;cursor:pointer;padding:0}
  ul[role="list"],ol[role="list"]{list-style:none;padding:0}
  table{border-collapse:collapse}
  [hidden]{display:none!important}
}

@layer base {
  :root{
    /* timing, shared by every site */
    --dur-fast:130ms; --dur-mid:260ms; --dur-slow:560ms;
    --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
    /* layout defaults, themes override */
    --maxw:76rem; --gutter:clamp(1.1rem,4vw,2.25rem);
    --header-h:4.25rem;
    --space-section:clamp(4rem,10vw,7.5rem);
    --radius:12px; --radius-sm:8px; --radius-lg:20px; --radius-btn:999px;
    --text-base:clamp(1rem,.96rem + .2vw,1.0625rem);
    --shadow-lift:0 1px 2px rgb(0 0 0/.05),0 4px 10px rgb(0 0 0/.05),0 16px 32px rgb(0 0 0/.07);
  }
  html{scroll-padding-top:calc(var(--header-h) + 1rem)}
  @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
  body{background:var(--canvas);color:var(--ink);font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
  h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;color:var(--heading,var(--ink));text-wrap:balance}
  p,li{text-wrap:pretty}
  a{color:inherit}
  :focus-visible{outline:3px solid var(--focus,var(--accent));outline-offset:3px;border-radius:3px}
  ::selection{background:var(--accent);color:var(--on-accent)}
  :target{scroll-margin-top:calc(var(--header-h) + 1rem)}
  @view-transition{navigation:auto}
  @media (prefers-reduced-motion:reduce){
    ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  }
}

@layer layout {
  .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
  .wrap--narrow{max-width:52rem}
  .wrap--wide{max-width:96rem}
  .section{padding-block:var(--space-section)}
  .measure{max-width:62ch}
  .stack>*+*{margin-block-start:var(--flow,1rem)}
  .vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}

@layer components {
  /* ---------- skip link ---------- */
  .skip{position:absolute;left:var(--gutter);top:-100px;z-index:300;padding:.75rem 1rem;border-radius:var(--radius-sm);
    background:var(--ink);color:var(--canvas);font-weight:700;text-decoration:none}
  .skip:focus{top:.75rem}

  /* ---------- icons ---------- */
  .ico{width:1.25em;height:1.25em;flex:none;stroke-width:2}

  /* ---------- buttons: every state, never transition:all ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.85rem 1.4rem;
    border-radius:var(--radius-btn);border:2px solid transparent;font-weight:700;font-size:1rem;line-height:1.1;
    text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) linear,color var(--dur-fast) linear,
      border-color var(--dur-fast) linear,box-shadow var(--dur-mid) var(--ease-out)}
  .btn .ico{transition:transform var(--dur-mid) var(--ease-out)}
  @media (hover:hover){ .btn:hover{transform:translateY(-2px)} .btn:hover .ico--go{transform:translateX(4px)} }
  .btn:active{transform:translateY(1px) scale(.985)}
  .btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
  .btn--primary{background:var(--primary);color:var(--on-primary)}
  @media (hover:hover){ .btn--primary:hover{background:var(--primary-hover,var(--primary))} }
  .btn--accent{background:var(--accent);color:var(--on-accent)}
  @media (hover:hover){ .btn--accent:hover{background:var(--accent-hover,var(--accent))} }
  .btn--ghost{border-color:currentColor;color:var(--ink)}
  @media (hover:hover){ .btn--ghost:hover{background:var(--ink);color:var(--canvas);border-color:var(--ink)} }
  .btn--block{width:100%}
  .btn[data-busy]{cursor:progress}

  /* ---------- text links: underline draw ---------- */
  .ul{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
    background-position:0 100%;background-size:100% 1px;transition:background-size var(--dur-mid) var(--ease-out)}
  @media (hover:hover){ .ul:hover{background-size:0 1px;background-position:100% 100%} }

  /* ---------- header ---------- */
  .site-header{position:sticky;top:0;z-index:100;background:var(--header-bg,var(--canvas));
    transition:box-shadow var(--dur-mid) linear,background-color var(--dur-mid) linear}
  .site-header.is-stuck{box-shadow:0 1px 0 var(--line),0 8px 24px rgb(0 0 0/.06)}
  .header-inner{display:flex;align-items:center;gap:1rem;min-height:var(--header-h)}
  .brand{display:inline-flex;align-items:center;gap:.6rem;margin-right:auto;text-decoration:none;font-family:var(--font-display);
    font-weight:700;font-size:1.15rem;letter-spacing:-.01em;border-radius:6px}
  .brand-mark{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-sm);background:var(--primary);color:var(--on-primary)}
  .brand-mark .ico{width:1.2rem;height:1.2rem}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-sm);color:var(--ink)}
  .nav-toggle .ico-close{display:none}
  .nav-open .nav-toggle .ico-open{display:none}
  .nav-open .nav-toggle .ico-close{display:block}
  .site-nav{position:fixed;inset:var(--header-h) 0 0 0;z-index:90;background:var(--canvas);padding:1.5rem var(--gutter) 2rem;
    overflow:auto;overscroll-behavior:contain;transform:translateY(-8px);opacity:0;visibility:hidden}
  @media (prefers-reduced-motion:no-preference){
    .site-nav{transition:transform var(--dur-mid) var(--ease-out),opacity var(--dur-mid) linear,visibility 0s linear var(--dur-mid)}
  }
  .nav-open .site-nav{transform:none;opacity:1;visibility:visible;transition-delay:0s}
  .nav-open{overflow:hidden}
  .site-nav ul{display:grid;gap:.25rem}
  .site-nav a{display:flex;align-items:center;min-height:52px;font-size:1.35rem;font-family:var(--font-display);font-weight:600;text-decoration:none}
  .site-nav a[aria-current="page"]{color:var(--accent-text,var(--accent))}
  .nav-cta{display:none}
  @media (min-width:900px){
    .nav-toggle{display:none}
    .site-nav{position:static;inset:auto;transform:none;opacity:1;visibility:visible;padding:0;background:none;overflow:visible}
    .site-nav ul{display:flex;gap:.25rem;align-items:center}
    .site-nav a{min-height:44px;padding:0 .8rem;font-size:.95rem;font-family:var(--font-body);font-weight:600;border-radius:var(--radius-sm)}
    .site-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.45em;text-decoration-thickness:2px}
    .nav-cta{display:inline-flex}
  }

  /* ---------- photos ---------- */
  .ph{position:relative;overflow:hidden;background:var(--ph-bg,var(--surface));border-radius:var(--radius-lg);aspect-ratio:var(--ratio,4/3)}
  .ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .ph--initials{display:grid;place-items:center;color:var(--on-primary);background:var(--primary)}
  .ph--initials > span{font-family:var(--font-display);font-size:clamp(2.4rem,7vw,4rem);line-height:1}
  .ph--initials > small{position:absolute;inset:auto .8rem .7rem;font-size:.72rem;font-weight:700;letter-spacing:.04em;opacity:.85}

  /* ---------- forms ---------- */
  .field{display:grid;gap:.4rem}
  .field > label,.legend{font-weight:700;font-size:.95rem}
  .input,.select,.textarea{width:100%;min-height:52px;padding:.8rem 1rem;border-radius:var(--radius-sm);border:1.5px solid var(--field-line,var(--line));
    background:var(--field-bg,var(--surface));color:var(--ink);transition:border-color var(--dur-fast) linear,box-shadow var(--dur-fast) linear}
  .textarea{min-height:130px;resize:vertical}
  .select{appearance:none;padding-right:2.75rem;background-image:var(--select-arrow);background-repeat:no-repeat;background-position:right 1rem center;background-size:1rem}
  .input:hover,.select:hover,.textarea:hover{border-color:var(--ink)}
  .input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:none;border-color:var(--focus,var(--accent));box-shadow:0 0 0 4px var(--focus-ring,rgb(0 0 0/.12))}
  [aria-invalid="true"]{border-color:var(--error)!important}
  .field-error{min-height:1.2em;font-size:.875rem;font-weight:600;color:var(--error)}
  .field-error:empty{min-height:0}
  /* choice chips: native radio/checkbox kept for state and a11y, drawn as a chip */
  .choices{display:flex;flex-wrap:wrap;gap:.5rem;border:0;padding:0}
  .choice{position:relative}
  .choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
  .choice span{display:inline-flex;align-items:center;gap:.45rem;min-height:46px;padding:.6rem 1rem;border-radius:var(--radius-btn);
    border:1.5px solid var(--field-line,var(--line));background:var(--field-bg,var(--surface));font-weight:600;
    transition:background-color var(--dur-fast) linear,border-color var(--dur-fast) linear,color var(--dur-fast) linear}
  .choice:hover span{border-color:var(--ink)}
  .choice input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
  .choice input:focus-visible + span{outline:3px solid var(--focus,var(--accent));outline-offset:2px}
  .check{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer}
  .check input{appearance:none;flex:none;width:24px;height:24px;margin-top:2px;border-radius:6px;border:2px solid var(--field-line,var(--line));
    background:var(--field-bg,var(--surface));display:grid;place-items:center;transition:background-color var(--dur-fast) linear,border-color var(--dur-fast) linear}
  .check input::after{content:"";width:6px;height:11px;border:solid var(--on-primary);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);margin-top:-2px;
    transition:transform var(--dur-fast) var(--ease-out)}
  .check input:checked{background:var(--primary);border-color:var(--primary)}
  .check input:checked::after{transform:rotate(45deg) scale(1)}
  .demo-note{display:none;padding:1rem 1.15rem;border-radius:var(--radius-sm);background:var(--note-bg,var(--surface));border-left:4px solid var(--accent);font-weight:600}
  .demo-note[data-shown]{display:block}
  .demo-note:focus{outline:none}

  /* ---------- FAQ: native details, animated where supported ---------- */
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:60px;padding:1rem 0;cursor:pointer;
    list-style:none;font-weight:700;font-size:1.05rem}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary .ico{transition:transform var(--dur-mid) var(--ease-out)}
  .faq details[open] summary .ico{transform:rotate(45deg)}
  .faq details > div{padding:0 0 1.25rem;max-width:64ch;color:var(--muted)}
  @supports (interpolate-size:allow-keywords){
    @media (prefers-reduced-motion:no-preference){
      .faq{interpolate-size:allow-keywords}
      .faq details::details-content{height:0;overflow:clip;transition:height var(--dur-mid) var(--ease-out),content-visibility var(--dur-mid) allow-discrete}
      .faq details[open]::details-content{height:auto}
    }
  }

  /* ---------- tabs ---------- */
  .tab-list{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:none}
  .tab{min-height:46px;padding:.6rem 1.1rem;border-radius:var(--radius-btn);border:1.5px solid var(--line);font-weight:700;white-space:nowrap;
    transition:background-color var(--dur-fast) linear,color var(--dur-fast) linear,border-color var(--dur-fast) linear}
  @media (hover:hover){ .tab:hover{border-color:var(--ink)} }
  .tab[aria-selected="true"]{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
  @media (prefers-reduced-motion:no-preference){ .tab-panel.tab-in{animation:tab-in var(--dur-mid) var(--ease-out)} }
  @keyframes tab-in{from{opacity:0;transform:translateY(8px)}}

  /* ---------- review carousel ---------- */
  .rv-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(86%,24rem);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;padding-bottom:.5rem;scrollbar-width:thin}
  .rv-card{scroll-snap-align:start}
  .rv-controls{display:flex;gap:.5rem}
  .rv-controls button{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);
    transition:background-color var(--dur-fast) linear,transform var(--dur-fast) var(--ease-out)}
  @media (hover:hover){ .rv-controls button:not(:disabled):hover{background:var(--ink);color:var(--canvas)} }
  .rv-controls button:active{transform:scale(.94)}
  .rv-controls button:disabled{opacity:.35;cursor:default}
  .sample-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--muted)}

  /* ---------- map: nothing loads until asked ---------- */
  .map-block{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);min-height:20rem}
  .map{position:absolute;inset:0}
  .map iframe{width:100%;height:100%;border:0}
  .map-face{position:relative;z-index:1;display:grid;align-content:end;gap:1rem;min-height:20rem;padding:1.5rem}
  .is-live .map-face{display:none}

  /* ---------- before and after ---------- */
  .ba{position:relative;overflow:hidden;border-radius:var(--radius-lg);--pos:50%}
  .ba > img,.ba > .ba-layer{display:block;width:100%}
  .ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
  .ba-before img{width:100%;height:100%;object-fit:cover}
  .ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--canvas);pointer-events:none}
  .ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
  .ba-range:focus-visible ~ .ba-line{outline:3px solid var(--accent);outline-offset:2px}
  .ba-tag{position:absolute;bottom:.75rem;padding:.3rem .7rem;border-radius:var(--radius-btn);background:rgb(0 0 0/.6);color:#f5f5f2;font-size:.8rem;font-weight:700}

  /* ---------- toast and back-to-top (created by base.js) ---------- */
  .toast{position:fixed;left:50%;bottom:calc(1.25rem + var(--callbar-h,0px));z-index:220;max-width:min(92vw,26rem);padding:.85rem 1.15rem;
    border-radius:var(--radius);background:var(--ink);color:var(--canvas);font-weight:600;transform:translate(-50%,150%);opacity:0;
    transition:transform var(--dur-mid) var(--ease-out),opacity var(--dur-mid) linear}
  .toast.is-shown{transform:translate(-50%,0);opacity:1}
  .to-top{position:fixed;right:1rem;bottom:calc(1rem + var(--callbar-h,0px));z-index:120;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
    background:var(--ink);color:var(--canvas);opacity:0;visibility:hidden;transform:translateY(10px);
    transition:opacity var(--dur-mid) linear,transform var(--dur-mid) var(--ease-out),visibility 0s linear var(--dur-mid)}
  .to-top.is-shown{opacity:1;visibility:visible;transform:none;transition-delay:0s}

  /* ---------- the call bar on phones (trades) ---------- */
  .callbar{position:fixed;inset:auto 0 0 0;z-index:110;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.6rem .6rem calc(.6rem + env(safe-area-inset-bottom));
    background:var(--callbar-bg,var(--ink))}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:50px;border-radius:var(--radius-btn);font-weight:800;text-decoration:none}
  .callbar .call{background:var(--accent);color:var(--on-accent)}
  .callbar .alt{border:2px solid currentColor;color:var(--callbar-text,var(--canvas))}
  body:has(.callbar){--callbar-h:70px;padding-bottom:70px}
  @media (min-width:900px){ .callbar{display:none} body:has(.callbar){--callbar-h:0px;padding-bottom:0} }

  /* ---------- footer ---------- */
  .site-footer{background:var(--footer-bg,var(--ink));color:var(--on-footer,var(--canvas));padding-block:clamp(3rem,7vw,5rem) 1.5rem}
  .site-footer a{text-decoration:none}
  @media (hover:hover){ .site-footer a:hover{text-decoration:underline;text-underline-offset:.3em} }
  .footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;margin-top:2.5rem;padding-top:1.25rem;
    border-top:1px solid var(--footer-line,rgb(255 255 255/.15));font-size:.85rem;opacity:.85}

  /* ---------- reveals: hidden only once the script has taken over ---------- */
  @media (prefers-reduced-motion:no-preference){
    .reveal-ready [data-reveal]{transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
    .reveal-ready [data-reveal]:not(.is-in){opacity:0}
    .reveal-ready [data-reveal="up"]:not(.is-in){transform:translateY(28px)}
    .reveal-ready [data-reveal="left"]:not(.is-in){transform:translateX(-36px)}
    .reveal-ready [data-reveal="right"]:not(.is-in){transform:translateX(36px)}
    .reveal-ready [data-reveal="zoom"]:not(.is-in){transform:scale(.95)}
    /* load choreography: first paint, the .js class comes from a hashed inline script */
    .js [data-load]{animation:load-rise .8s var(--ease-out) both;animation-delay:var(--d,0ms)}
    .js [data-load="fade"]{animation-name:load-fade}
    .js [data-load="mask"]{animation-name:load-mask;animation-duration:1.1s}
  }
  @keyframes load-rise{from{opacity:0;transform:translateY(18px)}}
  @keyframes load-fade{from{opacity:0}}
  @keyframes load-mask{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
}

@layer utilities {
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}