/* Riverside Digital Studio - shared stylesheet.
   Base is the homepage stylesheet, order preserved exactly.
   Interior-page rules are appended only where the selector is new,
   so nothing here can override a homepage rule. */

:root{ color-scheme: light;
    --ink:#141b38; --sub:#525b70; --line:#ccd3e2;
    --accent:#0c8a80; --accent-dark:#0a6f67; --accent-soft:#dcf5f0;
    --bg:#e9ecf3; --bg-alt:#e0e4ee; --card:#f7f8fc; --radius:16px;
    --good:#12b76a; --warn:#f79009;
    --footer-bg:#0b1230; --footer-sub:#9aa3c0; --footer-line:#232a45; --footer-chip:#151c33;
    --btn-ink:#ffffff;
    --grad2:#d7f7f2;
    --logo-grad2:#7c6aef;
    --header-bg: rgba(233,236,243,.92);
    --shadow-mega: 0 18px 38px rgba(20,27,56,.14);
    --shadow-chat: 0 20px 50px rgba(20,27,56,.12);
    --shadow-cta: 0 8px 18px rgba(12,138,128,.3);
    --shadow-float: 0 14px 30px rgba(12,138,128,.38);
    --stars-color:#f5a524;
    --focus-ring:#0b1230; --focus-halo:#ffffff;
    --grad-local: linear-gradient(135deg,#2e2599,#6a63e9);
    --grad-eco: linear-gradient(135deg,#008f86,#18e2cb);
    --grad-booking:linear-gradient(135deg,#0c8a80,#7c6aef);
    --grad-ai:linear-gradient(135deg,#3b2c8f,#0c8a80);
    --spotlight-op:.92;
    --spotlight-pin-op:.85;
  }
  :root[data-theme="dark"]{ color-scheme: dark;
    --ink:#eef1fa; --sub:#9aa3c0; --line:#232a45;
    --accent:#2dd4c8; --accent-dark:#5eead4; --accent-soft:#0d2b34;
    --bg:#05060b; --bg-alt:#0b0f1a; --card:#10131f;
    --good:#34d399; --warn:#fbbf24;
    --footer-bg:#030407; --footer-sub:#8a93a6; --footer-line:#1a2130; --footer-chip:#141b29;
    --btn-ink:#04141a;
    --grad2:#132a3a;
    --logo-grad2:#7c6aef;
    --header-bg: rgba(5,6,11,.86);
    --shadow-mega: 0 20px 50px rgba(0,0,0,.55);
    --shadow-chat: 0 30px 70px rgba(0,0,0,.55);
    --shadow-cta: 0 8px 20px rgba(45,212,200,.35);
    --shadow-float: 0 16px 34px rgba(45,212,200,.45);
    --stars-color:#fbbf24;
    --focus-ring:#ffffff; --focus-halo:#05060b;
    --grad-local: linear-gradient(135deg,#18094e,#6a63e9);
    --grad-eco: linear-gradient(135deg,#003f3c,#18e2cb);
    --grad-booking:linear-gradient(135deg,#0f6f68,#6a63e9);
    --grad-ai:linear-gradient(135deg,#241a63,#0f6f68);
    --spotlight-op:.85;
    --spotlight-pin-op:.8;
  }
  *{box-sizing:border-box;}
  img,svg{max-width:100%;}
  img{height:auto;}

  /* Riva */
  .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;}
  .chat-head{position:relative;}
  .chat-reset{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:0;
    color:var(--sub);font-size:17px;cursor:pointer;padding:6px;border-radius:8px;line-height:1;}
  .chat-reset:hover{color:var(--accent);background:var(--bg-alt);}
  .chat-body{min-height:250px;max-height:330px;overflow-y:auto;scroll-behavior:smooth;}
  .bubble{animation:rivaIn .22s ease-out;}
  @keyframes rivaIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
  .chat-choices{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;}
  .chat-choices:empty{padding:0;}
  .chip-btn{background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent-dark);
    padding:8px 13px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;transition:.14s;}
  .chip-btn:hover{background:var(--accent);color:var(--btn-ink);}
  .chat-input input:disabled,.chat-input button:disabled{opacity:.5;cursor:not-allowed;}
  .riva-summary{background:var(--accent-soft);border:1px solid var(--accent);border-radius:12px;
    padding:12px 14px;margin:8px 16px 4px;font-size:13px;line-height:1.6;}
  .riva-summary b{display:block;margin-bottom:6px;color:var(--accent-dark);font-size:11.5px;
    letter-spacing:.06em;text-transform:uppercase;}
  .riva-summary dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;}
  .riva-summary dt{color:var(--sub);}
  .riva-summary dd{margin:0;font-weight:600;}
  /* dual focus ring: a dark core with a light halo (inverted in dark mode) so at least
     one of the two always clears 3:1, including on the teal CTA and the gradient bands.
     No border-radius here - the outline follows each element's own shape. */
  :focus-visible{
    outline:3px solid var(--focus-ring);
    outline-offset:2px;
    box-shadow:0 0 0 7px var(--focus-halo);
  }
  :focus:not(:focus-visible){outline:none;}
  .skip-link:focus-visible{box-shadow:0 0 0 7px var(--focus-halo);}
  .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--btn-ink);
    padding:12px 20px;border-radius:0 0 10px 0;font-weight:700;font-size:14px;text-decoration:none;}
  .skip-link:focus{left:0;}
  main:focus{outline:none;}
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
      transition-duration:.01ms!important;scroll-behavior:auto!important;}
  }
  body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55;}
  body, header, .cat-card, .case-card, .tier-card, .blog-card, .social-tile, .press-badge, .chatcard, footer, .magnet, .badgechip{
    transition:background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
  }
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1160px;margin:0 auto;padding:0 24px;}
  section{padding:70px 0;}
  h1,h2,h3{margin:0;}
  .eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 8px;}

  header{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--header-bg);backdrop-filter:blur(6px);z-index:50;}
  .navrow{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1160px;margin:0 auto;gap:16px;}
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;}
  .logo picture,.hero-logo-wrap picture{display:block;line-height:0;}
  .hero-row picture{grid-area:logo;}
  .logo-mark{width:32px;height:32px;object-fit:contain;display:block;}
  .logo-wordmark{height:20px;width:auto;object-fit:contain;display:block;}
  .logo-r-lockup{height:52px;width:auto;object-fit:contain;display:block;position:relative;top:4px;}
  .hero-logo{width:100%;max-width:280px;height:auto;object-fit:contain;display:block;margin:0 auto;}
  nav{flex:1;}
  nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;font-size:14px;font-weight:600;color:var(--sub);}
  nav li{position:relative;}
  nav li.has-mega{padding-bottom:16px;margin-bottom:-16px;}
  .mega-trigger{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none;
    display:inline-flex;align-items:center;gap:5px;font-weight:600;}
  .mega-trigger .caret{font-size:10px;transition:transform .16s;}
  .mega-trigger[aria-expanded="true"] .caret{transform:rotate(180deg);}
  .has-mega:hover .mega,
  .has-mega:focus-within .mega,
  .mega-trigger[aria-expanded="true"] + .mega{display:grid;}
  .mega{display:none;position:absolute;top:100%;left:-40px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-mega);padding:22px;grid-template-columns:repeat(3,1fr);gap:22px 26px;width:660px;z-index:60;}
  .mega-col{display:flex;flex-direction:column;}
  .mega-blog{grid-template-columns:repeat(3,1fr);width:700px;gap:14px;
    left:50%;right:auto;transform:translateX(-50%);max-width:calc(100vw - 48px);}
  .mega-post{display:flex;flex-direction:column;gap:5px;padding:14px;border:1px solid var(--line);
    border-radius:12px;background:var(--bg-alt);transition:.16s;}
  .mega-post:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px);}
  .mega-cat{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark);}
  .mega-post b{font-size:13px;line-height:1.35;color:var(--ink);}
  .mega-post small{font-size:11.5px;color:var(--sub);line-height:1.45;font-weight:400;}
  .mega-post .mega-meta{margin-top:auto;padding-top:4px;font-size:11px;color:var(--sub);font-weight:600;}
  .mega-all{grid-column:1/-1;text-align:center;font-size:13px;font-weight:700;
    color:var(--accent-dark)!important;padding:10px!important;border-top:1px solid var(--line);
    border-radius:0!important;margin-top:2px;}
  .mega-all:hover{background:var(--accent-soft)!important;}
  .mega-head{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin-bottom:2px;}
  .mega-why{font-size:11px;color:var(--sub);margin:0 0 8px;font-weight:400;line-height:1.35;}
  .mega a{display:block;padding:7px 10px;border-radius:8px;font-size:12.5px;color:var(--sub);font-weight:600;}
  .mega a:hover{background:var(--accent-soft);color:var(--accent-dark);}
  .mega small{display:block;font-weight:400;color:var(--sub);font-size:11px;margin-top:2px;}

  .header-actions{display:flex;align-items:center;gap:14px;}
  .theme-toggle{
    width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);
    display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;flex-shrink:0;
  }
  .theme-toggle:hover{border-color:var(--accent);}
  .theme-toggle .icon-sun{display:none;}
  .theme-toggle .icon-moon{display:inline-flex;}
  :root[data-theme="dark"] .theme-toggle .icon-sun{display:inline-flex;}
  :root[data-theme="dark"] .theme-toggle .icon-moon{display:none;}

  .cta-btn{background:var(--accent);color:var(--btn-ink);padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:var(--shadow-cta);border:none;cursor:pointer;}
  .btn-outline{border:1.5px solid var(--line);padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;}

  /* hero */
  .hero{padding:60px 0 46px;}
  .hero-row{
    display:grid;
    grid-template-columns:280px 1fr 420px;
    grid-template-areas:
      "logo head chat"
      "sub  sub  chat";
    gap:28px 36px;
    align-items:center;
  }
  .hero-logo{grid-area:logo;}
  .hero-row h1{grid-area:head;font-size:38px;letter-spacing:-.02em;text-align:center;align-self:center;}
  .hero-row .chatcard{grid-area:chat;align-self:stretch;}
  .hero-sub{grid-area:sub;text-align:center;}
  .hero-sub p.lead{color:var(--sub);font-size:16px;max-width:480px;margin:0 auto;}
  .hero-actions{margin-top:24px;display:flex;gap:12px;justify-content:center;}

  .chatcard{border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-chat);overflow:hidden;background:var(--card);}
  .chat-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bg-alt);}
  .chat-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--logo-grad2));display:flex;align-items:center;justify-content:center;color:var(--btn-ink);font-size:13px;font-weight:800;}
  .chat-head b{font-size:13px;}
  .chat-head span{font-size:11px;color:var(--good);display:block;}
  .chat-body{padding:20px;display:flex;flex-direction:column;gap:12px;min-height:260px;}
  .bubble{max-width:80%;padding:11px 15px;border-radius:14px;font-size:13px;line-height:1.45;}
  .bubble.bot{background:var(--bg-alt);align-self:flex-start;border-bottom-left-radius:4px;}
  .bubble.user{background:var(--accent);color:var(--btn-ink);align-self:flex-end;border-bottom-right-radius:4px;font-weight:600;}
  .typing{display:flex;gap:4px;align-self:flex-start;padding:4px 10px;}
  .typing span{width:6px;height:6px;border-radius:50%;background:var(--sub);opacity:.6;}
  .bubble.audit{background:var(--bg-alt);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px;width:88%;}
  .audit-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;padding:6px 0;border-bottom:1px dashed var(--line);}
  .audit-row:last-child{border-bottom:none;}
  .audit-row .bar{flex:1;height:5px;border-radius:3px;background:var(--line);margin:0 10px;overflow:hidden;}
  .audit-row .bar i{display:block;height:100%;border-radius:3px;transition:width .5s ease;}
  .score-good{color:var(--good);font-weight:800;} .score-warn{color:var(--warn);font-weight:800;}
  .score-bad{color:#e5484d;font-weight:800;}
  .demo-tag{background:var(--warn);color:#fff;font-size:9.5px;letter-spacing:.08em;
    padding:2px 6px;border-radius:4px;margin-left:6px;vertical-align:middle;}
  .audit-head{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);
    font-weight:800;margin-bottom:8px;display:block;}
  .audit-foot{font-size:11px;color:var(--sub);margin-top:9px;padding-top:8px;border-top:1px solid var(--line);}
  .audit-tips{margin:8px 0 0;padding-left:16px;font-size:12px;color:var(--sub);line-height:1.5;}
  .audit-tips li{margin-bottom:3px;}
  .audit-progress{font-size:12px;color:var(--sub);}
  .audit-progress b{color:var(--accent-dark);}
  .chat-input{display:flex;gap:8px;padding:14px 18px;border-top:1px solid var(--line);}
  .chat-input input{flex:1;border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-size:13px;background:var(--bg-alt);color:var(--ink);}
  .chat-input button{background:var(--accent);color:var(--btn-ink);border:none;border-radius:999px;padding:9px 16px;font-weight:700;font-size:13px;}

  /* Floating "Ask Riva" button. A pill that collapses to a circle on small
     screens. No unread badge - there is no unread message. */
  .floatchat{position:fixed;bottom:26px;right:26px;z-index:80;
    display:inline-flex;align-items:center;gap:9px;
    height:56px;padding:0 22px 0 18px;border:none;border-radius:999px;
    background:var(--accent);color:var(--btn-ink);
    font-family:inherit;font-size:15px;font-weight:700;line-height:1;letter-spacing:-.01em;
    text-decoration:none;cursor:pointer;box-shadow:var(--shadow-float);
    transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease, visibility .18s;}
  .floatchat .fc-icon{font-size:21px;line-height:1;}
  .floatchat:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(12,138,128,.45);}
  .floatchat:active{transform:translateY(0);}
  .floatchat.is-hidden{opacity:0;visibility:hidden;transform:translateY(10px) scale(.94);pointer-events:none;}
  @media (max-width:620px){
    .floatchat{width:56px;height:56px;padding:0;justify-content:center;border-radius:50%;}
    .floatchat .fc-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
      overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
    .floatchat{bottom:18px;right:18px;}
  }
  @media print{ .floatchat{display:none;} }

  .trustbar{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;}
  .trust-row{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;font-size:13px;color:var(--sub);}
  .stars{color:var(--stars-color);font-weight:700;}
  .badgechip{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);padding:6px 12px;border-radius:999px;}

  .section-head{max-width:620px;margin-bottom:36px;}
  .section-head.center{margin:0 auto 36px;text-align:center;}
  .section-head h2{font-size:28px;letter-spacing:-.01em;}
  .section-head p{color:var(--sub);margin-top:10px;font-size:15px;}

  /* services catalog */
  .catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  .cat-card{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:var(--card);}
  .cat-card.highlight{border-color:var(--accent);background:var(--accent-soft);}
  .cat-icon{width:40px;height:40px;border-radius:10px;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px;}
  .cat-card.highlight .cat-icon{background:var(--card);}
  .cat-card h3{font-size:15px;}
  .cat-card p{color:var(--sub);font-size:13px;margin-top:8px;}
  .cat-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;}
  .cat-list li{font-size:12.5px;font-weight:600;color:var(--sub);padding-left:16px;position:relative;line-height:1.4;}
  .cat-list li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.65;}
  /* mega-menu deep links: clear the sticky header, then flag the service you picked */
  .cat-list li{scroll-margin-top:120px;border-radius:6px;transition:background-color .3s ease,color .3s ease;}
  .cat-list li:target{background:var(--accent);color:var(--btn-ink);font-weight:800;padding-top:2px;padding-bottom:2px;padding-right:8px;}
  .cat-list li:target::before{background:var(--btn-ink);opacity:1;left:6px;top:9px;}
  .cat-list li:target{padding-left:22px;}
  .cat-card,section[id]{scroll-margin-top:100px;}
  /* Riva sits behind a sticky header - without this the card lands under it */
  .chatcard,#riva,#contact,#work,#about,#pricing{scroll-margin-top:104px;}
  .cat-card .learn{display:inline-block;margin-top:14px;font-size:12px;font-weight:700;color:var(--accent-dark);}
  /* FTC affiliate disclosure. Sits with the link, not the footer, and matches
     it in size - a disclosure the visitor has to hunt for is not a disclosure.
     Deliberately unscoped: the disclosure must look the same everywhere it
     appears, and scoping it to one container is how it ends up unstyled the
     first time an affiliate link moves. */
  .aff-note{display:block;margin-top:6px;font-size:12px;font-weight:600;color:var(--sub);line-height:1.4;}

  /* pricing tiers */
  .tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .tier-card{border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;background:var(--card);display:flex;flex-direction:column;}
  .tier-card ul{flex:1;}
  .tier-card.popular{border:2px solid var(--accent);position:relative;}
  .tier-flag{position:absolute;top:-12px;left:22px;background:var(--accent);color:var(--btn-ink);font-size:11px;font-weight:700;padding:4px 12px;border-radius:999px;}
  .tier-card h3{font-size:17px;}
  .tier-price{font-size:28px;font-weight:800;margin:12px 0;}
  .tier-price span{font-size:12px;font-weight:600;color:var(--sub);}
  .tier-price .from{font-size:13px;font-weight:600;color:var(--sub);margin-right:2px;}
  .tier-card ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--sub);}
  .tier-card ul li:before{content:"✓ ";color:var(--accent-dark);font-weight:800;}
  .tier-btn{display:block;text-align:center;margin-top:18px;background:var(--bg-alt);border:1px solid var(--line);padding:10px;border-radius:10px;font-weight:700;font-size:13px;color:var(--ink);}
  .tier-card.popular .tier-btn{background:var(--accent);color:var(--btn-ink);border:none;}
  @media (max-width:1080px){ .tier-grid{grid-template-columns:repeat(2,1fr);} }

  /* how it works */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .step{text-align:center;padding:0 10px;}
  .step-num{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--btn-ink);display:flex;align-items:center;justify-content:center;font-weight:800;margin:0 auto 12px;font-size:14px;}
  .step h3{font-size:15px;}
  .step p{color:var(--sub);font-size:13px;margin-top:6px;}

  /* case studies */
  .case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .case-card{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--card);}
  .case-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--accent-dark);background:var(--accent-soft);padding:4px 10px;border-radius:999px;margin-bottom:12px;}
  .case-card h3{font-size:16px;margin-bottom:6px;}
  .case-card p{color:var(--sub);font-size:13px;}
  .case-card .result{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);font-size:12px;color:var(--sub);}

  /* spotlight bands */
  .spotlight-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  .spotlight-card{border-radius:var(--radius);padding:28px;color:#fff;}
  .spotlight-card.local{background:var(--grad-local);}
  .spotlight-card.ada{background:var(--grad-eco);}
  .spotlight-card h3{font-size:20px;margin-bottom:10px;color:#fff;}
  .spotlight-card p{opacity:var(--spotlight-op);font-size:14px;max-width:360px;}
  .spotlight-card.booking{background:var(--grad-booking);}
  .spotlight-card.ai{background:var(--grad-ai);}
  /* Reuse the existing gradients under names that say what the section is,
     rather than putting class="ada" on a page about websites. */
  .spotlight-card.web{background:var(--grad-eco);}
  .spotlight-card.apps{background:var(--grad-local);}
  .spotlight-card.brand{background:var(--grad-ai);}
  .spotlight-card.briefs{background:var(--grad-booking);}
  .spotlight-card.community{background:var(--grad-eco);}
  .spotlight-card.pay{background:var(--grad-local);}
  .spotlight-card.care{background:var(--grad-ai);}
  .booking-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;}
  .booking-list{list-style:none;display:grid;gap:12px;}
  .booking-list li{background:rgba(255,255,255,.12);border-radius:10px;padding:12px 14px;}
  .booking-list b{display:block;font-size:14px;margin-bottom:2px;}
  .booking-list span{font-size:13px;opacity:var(--spotlight-op);}
  .booking-link{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:600;}
  .booking-link:hover{opacity:.8;}
  a.learn{display:inline-block;}
  .spotlight-card .pin{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:var(--spotlight-pin-op);margin-bottom:10px;display:block;}

  /* lead magnet */
  .magnet{background:var(--bg-alt);border:1px dashed var(--accent);border-radius:var(--radius);padding:32px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
  .magnet h3{font-size:19px;}
  .magnet p{color:var(--sub);font-size:14px;margin-top:6px;max-width:420px;}
  .magnet-form{display:flex;gap:8px;}
  .magnet-form input{padding:12px 14px;border-radius:999px;border:1px solid var(--line);font-size:14px;width:220px;background:var(--bg);color:var(--ink);}
  .magnet-form button{background:var(--accent);color:var(--btn-ink);border:none;padding:12px 20px;border-radius:999px;font-weight:700;font-size:14px;}

  /* awards */
  .press-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;padding:10px 0;}
  .press-badge{border:1px solid var(--line);border-radius:10px;padding:10px 18px;font-size:12px;font-weight:700;color:var(--sub);background:var(--card);}

  /* social profiles */
  .social-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
  .social-tile{border:1px solid var(--line);border-radius:12px;padding:14px 8px;text-align:center;font-size:12px;font-weight:700;color:var(--sub);background:var(--card);}
  .social-tile .ic{font-size:18px;display:block;margin-bottom:6px;}

  footer{background:var(--footer-bg);color:var(--footer-sub);padding:48px 0 28px;font-size:13px;}
  .foot-grid nav{display:contents;}
  .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;}
  /* Footer column labels are h3, not h4: the last content heading on most
     pages is an h2, so h4 here would skip a level in the document outline. */
  footer h3{color:#fff;font-size:13px;margin-bottom:12px;}
  footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
  .credential-badge{display:inline-flex;align-items:center;gap:8px;background:var(--footer-chip);padding:8px 14px;border-radius:999px;margin-top:14px;font-size:12px;}
  .foot-contact{color:var(--footer-sub);}
  .foot-contact:hover{color:var(--accent);text-decoration:underline;}
  .foot-legal a{color:var(--footer-sub);}
  .foot-legal a:hover{color:var(--accent);text-decoration:underline;}
  .foot-bottom{border-top:1px solid var(--footer-line);margin-top:32px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

  @media (max-width:900px){
    .catalog,.tier-grid,.steps,.case-grid,.spotlight-grid,.foot-grid,.booking-grid{grid-template-columns:1fr!important;}
    .hero-row{grid-template-columns:1fr!important;grid-template-areas:"logo" "head" "chat" "sub"!important;}
    .social-grid{grid-template-columns:repeat(3,1fr);}
    nav ul{display:none;}
    .mega,.mega-blog{width:280px;left:0;right:auto;transform:none;max-width:none;grid-template-columns:1fr;gap:12px;}
  }

/* ---- interior pages ---- */
.has-mega:hover .mega{display:grid;}
/* blog */
  .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.blog-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);}
.blog-thumb{height:110px;background:linear-gradient(135deg,var(--accent-soft),var(--grad2));}
.blog-body{padding:18px;}
.blog-cat{font-size:11px;font-weight:700;color:var(--accent-dark);text-transform:uppercase;letter-spacing:.05em;}
.blog-body h4{font-size:15px;margin:8px 0 0;}
@media (max-width:900px){
    .catalog,.tier-grid,.steps,.case-grid,.blog-grid,.spotlight-grid,.foot-grid,.booking-grid{grid-template-columns:1fr!important;}
    .hero-row{grid-template-columns:1fr!important;grid-template-areas:"logo" "head" "chat" "sub"!important;}
    .social-grid{grid-template-columns:repeat(3,1fr);}
    nav ul{display:none;}
    .mega{width:280px;left:0;grid-template-columns:1fr;gap:14px;}
  }
/* legal / content pages */
  .legal{max-width:820px;margin:0 auto;padding:0 24px;}
.legal h1{font-size:34px;letter-spacing:-.02em;margin-bottom:8px;}
.legal .sub{color:var(--sub);font-size:17px;margin:0 0 18px;line-height:1.6;}
.legal .meta{color:var(--sub);font-size:14px;margin:0 0 6px;}
.legal h2{font-size:19px;margin:34px 0 10px;letter-spacing:-.01em;scroll-margin-top:90px;}
.legal h3{font-size:15.5px;margin:20px 0 6px;}
.legal p{font-size:15px;line-height:1.7;margin:0 0 12px;}
.legal ul{font-size:15px;line-height:1.7;padding-left:22px;margin:0 0 14px;}
.legal li{margin-bottom:6px;}
.legal a{color:var(--accent-dark);font-weight:600;}
.legal a:hover{text-decoration:underline;}
.legal .tldr{background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius);padding:20px 22px;margin:22px 0 26px;}
.legal .tldr p{margin:0;}
.legal table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:13.5px;}
.legal th{background:var(--accent);color:var(--btn-ink);text-align:left;padding:9px 12px;font-size:12.5px;}
.legal td{border:1px solid var(--line);padding:9px 12px;color:var(--sub);vertical-align:top;}
.legal td:first-child{color:var(--ink);font-weight:600;}
.legal .toc{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-bottom:14px;}
.legal .toc a{display:inline-block;font-size:13.5px;margin:3px 14px 3px 0;}
/* ---- breadcrumbs ----
   Replaced the .legal .back and .post .back links, which sat in this spot and
   did the same job less well. Generated by tools/add_breadcrumbs.py, which
   writes the markup and the BreadcrumbList schema from one table so the two
   cannot drift.

   <ol> reversed out to a plain row: the numbering matters semantically, and to
   a screen reader, but should not render. Separators are ::before content on
   every item except the first, and are aria-hidden by virtue of being
   generated content - assistive tech reads the list structure instead. */
.crumbs{margin:0 0 22px;}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;}
.crumbs li{display:flex;align-items:center;font-size:13.5px;line-height:1.5;min-width:0;}
.crumbs li + li::before{
  content:"/";
  margin:0 9px;
  color:var(--line);
  font-weight:400;
  /* Decorative. Keeps the slash from being read out as punctuation. */
  speak:never;
}
.crumbs a{color:var(--accent-dark);font-weight:600;text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}
/* The current page. Not a link, and visibly the end of the trail. */
.crumbs [aria-current="page"]{color:var(--sub);font-weight:600;}
@media (max-width:640px){
  .crumbs{margin-bottom:18px;}
  .crumbs li{font-size:12.5px;}
  .crumbs li + li::before{margin:0 6px;}
  /* Long post titles would otherwise push the row into three lines. */
  .crumbs [aria-current="page"]{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
  }
}
.sitemap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;margin-top:8px;}
.sitemap-grid h3{margin-top:0;color:var(--accent-dark);}
.sitemap-grid ul{list-style:none;padding:0;font-size:14px;}
.sitemap-grid li{margin-bottom:7px;}
.sitemap-grid .soon{color:var(--sub);font-weight:400;}
@media(max-width:820px){ .sitemap-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:640px){
    .sitemap-grid{grid-template-columns:1fr;}
    .legal table,.legal thead,.legal tbody,.legal tr,.legal td,.legal th{display:block;width:100%;}
    .legal thead{display:none;} .legal td{border-top:0;}
    .legal tr{border-top:1px solid var(--line);margin-bottom:10px;}
  }
/* blog */
  .post{max-width:760px;margin:0 auto;padding:0 24px;}
.post .kicker{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
    color:var(--accent-dark);background:var(--accent-soft);padding:5px 11px;border-radius:999px;margin-bottom:14px;}
.post h1{font-size:clamp(28px,4.4vw,40px);letter-spacing:-.025em;line-height:1.15;margin-bottom:14px;}
.post .byline{color:var(--sub);font-size:13.5px;margin:0 0 26px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.post .byline span{display:inline-flex;align-items:center;gap:5px;}
.tldr{background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius);padding:22px 24px;margin:0 0 34px;}
.tldr h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dark);margin:0 0 10px;}
.tldr p{font-size:15px;line-height:1.65;margin:0;}
.post h2{font-size:23px;margin:38px 0 12px;letter-spacing:-.015em;scroll-margin-top:90px;}
.post h3{font-size:17px;margin:26px 0 8px;}
.post p{font-size:16.5px;line-height:1.75;margin:0 0 16px;}
.post ul,.post ol{font-size:16.5px;line-height:1.75;padding-left:24px;margin:0 0 18px;}
.post li{margin-bottom:8px;}
.post a{color:var(--accent-dark);font-weight:600;}
.post a:hover{text-decoration:underline;}
.post strong{font-weight:700;}
.pull{border-left:4px solid var(--accent);padding:4px 0 4px 20px;margin:26px 0;font-size:19px;
    line-height:1.55;color:var(--ink);font-weight:600;letter-spacing:-.01em;}
figure{margin:30px 0;}
figure svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);}
figcaption{font-size:13px;color:var(--sub);margin-top:9px;text-align:center;line-height:1.5;}
.post table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:14px;}
.post th{background:var(--accent);color:var(--btn-ink);text-align:left;padding:10px 12px;font-size:12.5px;}
.post td{border:1px solid var(--line);padding:10px 12px;color:var(--sub);vertical-align:top;}
.post td:first-child{color:var(--ink);font-weight:600;}
.post .sources{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;font-size:13.5px;color:var(--sub);}
.post .sources h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);margin:0 0 10px;}
.post .sources a{font-weight:500;}
.cta-box{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin:38px 0 0;text-align:center;}
.cta-box h2,.cta-box h3{margin:0 0 8px;font-size:19px;}
.cta-box p{font-size:15px;color:var(--sub);margin:0 auto 16px;max-width:52ch;}
.next-up{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px;}
.next-up a{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:var(--card);
    text-decoration:none;transition:.16s;}
.next-up a:hover{border-color:var(--accent);transform:translateY(-2px);text-decoration:none;}
.next-up .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);font-weight:700;}
.next-up strong{display:block;margin-top:6px;font-size:15px;color:var(--ink);line-height:1.35;}
/* blog index */
  .idx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.idx-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);
    display:flex;flex-direction:column;text-decoration:none;transition:.18s;}
.idx-card:hover{border-color:var(--accent);transform:translateY(-3px);}
.idx-card .thumb{aspect-ratio:16/9;border-bottom:1px solid var(--line);}
.idx-card .thumb svg{width:100%;height:100%;display:block;}
.idx-card .body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.idx-card .cat{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark);}
/* Card titles are h2 on the blog index (top-level items under the page h1)
   and h3 inside the newsletter section, so both need the same look. */
.idx-card h2,.idx-card h3{font-size:17px;line-height:1.35;margin:0;color:var(--ink);font-weight:700;}
.idx-card p{font-size:14px;color:var(--sub);margin:0;line-height:1.55;}
.idx-card .meta{margin-top:auto;padding-top:8px;font-size:12.5px;color:var(--sub);}
@media(max-width:900px){ .idx-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:640px){ .idx-grid,.next-up{grid-template-columns:1fr;} .post p,.post ul,.post ol{font-size:16px;}
    .post table,.post thead,.post tbody,.post tr,.post td,.post th{display:block;width:100%;}
    .post thead{display:none;} .post td{border-top:0;} .post tr{border-top:1px solid var(--line);margin-bottom:10px;} }
/* legal page */
  .legal{max-width:820px;margin:0 auto;padding:0 24px;}
@media(max-width:640px){ .legal table,.legal thead,.legal tbody,.legal tr,.legal td,.legal th{display:block;width:100%;}
    .legal thead{display:none;} .legal td{border-top:0;} .legal tr{border-top:1px solid var(--line);margin-bottom:10px;} }

/* ============================================================
   Start a Project - intake form
   ============================================================ */
.form-head{max-width:760px;}
.form-head h1{font-size:clamp(30px,5vw,44px);letter-spacing:-.02em;}
.form-head .lede{color:var(--sub);font-size:17px;line-height:1.6;margin-top:14px;}
.contact-strip{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:10px 26px;
  font-size:14px;font-weight:600;color:var(--sub);}
.contact-strip li{display:flex;align-items:center;gap:7px;}
.contact-strip a{color:var(--accent-dark);}
.contact-strip a:hover{text-decoration:underline;}

.form-intro{max-width:760px;border-left:3px solid var(--accent);padding:2px 0 2px 20px;margin-bottom:34px;}
.form-intro h2{font-size:22px;letter-spacing:-.01em;}
.form-intro p{color:var(--sub);font-size:15px;line-height:1.65;margin-top:10px;}
.form-intro .form-time{font-size:13px;font-weight:700;color:var(--accent-dark);margin-top:14px;}

.rds-form{max-width:820px;}
.rds-form fieldset{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  padding:26px 26px 30px;margin:0 0 22px;}
.rds-form > fieldset > legend{font-size:17px;font-weight:800;color:var(--ink);padding:0 10px;
  letter-spacing:-.01em;}
.rds-form fieldset.sub{background:var(--bg-alt);border-style:dashed;padding:18px 20px 20px;margin:0 0 20px;}
.rds-form fieldset.sub legend{font-size:13.5px;font-weight:700;color:var(--ink);padding:0 8px;}

.field{margin-bottom:20px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:7px;line-height:1.4;}
.field small{display:block;font-size:12.5px;color:var(--sub);margin-top:6px;line-height:1.5;}
.req{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent-dark);background:var(--bg-alt);border:1px solid var(--line);
  border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:1px;}

.rds-form input[type=text],.rds-form input[type=email],.rds-form input[type=tel],
.rds-form input[type=url],.rds-form input[type=date],.rds-form select,.rds-form textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:15px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  transition:border-color .15s ease, box-shadow .15s ease;}
.rds-form textarea{resize:vertical;min-height:76px;line-height:1.55;}
.rds-form input:hover,.rds-form select:hover,.rds-form textarea:hover{border-color:var(--accent);}
.rds-form input:focus,.rds-form select:focus,.rds-form textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-halo);}
.rds-form input::placeholder,.rds-form textarea::placeholder{color:var(--sub);opacity:.62;}
.rds-form select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;}

.opt{display:flex;align-items:flex-start;gap:9px;font-size:14px;font-weight:600;color:var(--ink);
  margin-bottom:9px;cursor:pointer;line-height:1.45;}
.opt input{width:17px;height:17px;margin:1px 0 0;accent-color:var(--accent);flex:none;cursor:pointer;}
.opt:hover{color:var(--accent-dark);}
.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 18px;}

.consent{border-top:1px solid var(--line);padding-top:20px;}
.consent .opt{font-weight:600;font-size:14px;}
.consent a{color:var(--accent-dark);text-decoration:underline;}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.form-actions{margin-top:26px;}
.form-actions .cta-btn{font-size:15px;padding:14px 30px;border:none;cursor:pointer;font-family:inherit;}
.form-actions .cta-btn:disabled{opacity:.6;cursor:default;}
.form-note{font-size:13px;color:var(--sub);margin-top:14px;line-height:1.55;}

.has-error input,.has-error select,.has-error textarea{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.15);}
.has-error > label,.has-error > legend{color:#c0392b;}

.form-status{margin-top:18px;font-size:15px;line-height:1.6;border-radius:var(--radius);}
.form-status:empty{display:none;}
.form-status p{margin-top:8px;}
.form-status.is-busy{padding:14px 18px;background:var(--bg-alt);border:1px solid var(--line);color:var(--sub);}
.form-status.is-bad{padding:16px 18px;background:rgba(192,57,43,.08);border:1px solid rgba(192,57,43,.35);}
.form-status.is-ok{padding:26px 24px;background:var(--bg-alt);border:2px solid var(--accent);font-size:16px;}
.form-status a{color:var(--accent-dark);font-weight:700;text-decoration:underline;}

@media (max-width:760px){
  .field-row,.check-grid{grid-template-columns:1fr;}
  .rds-form fieldset{padding:20px 18px 24px;}
  .contact-strip{gap:8px 18px;font-size:13px;}
}

/* --- inline email / phone validation --- */
.field-msg{margin:7px 0 0;font-size:12.5px;line-height:1.5;font-weight:600;}
.field-msg:empty{display:none;}
.field-msg.is-bad{color:#c0392b;}
.field-msg.is-good{color:var(--accent-dark);}
.field-msg.is-good::before{content:"\2713\00a0";font-weight:800;}
.field.is-bad input{border-color:#c0392b;}
.field.is-bad input:focus{box-shadow:0 0 0 3px rgba(192,57,43,.18);}
.field.is-good input{border-color:var(--accent);}
.fix-btn{font:inherit;font-size:12.5px;font-weight:800;color:var(--accent-dark);background:var(--accent-soft);
  border:1px solid var(--accent);border-radius:6px;padding:1px 7px;cursor:pointer;}
.fix-btn:hover{background:var(--accent);color:var(--btn-ink);}
:root[data-theme="dark"] .field-msg.is-bad{color:#ff8a7a;}
:root[data-theme="dark"] .field.is-bad input{border-color:#ff8a7a;}
:root[data-theme="dark"] .field.is-bad input:focus{box-shadow:0 0 0 3px rgba(255,138,122,.22);}

/* --- checklist request form --- */
.magnet-form{align-items:center;}
.magnet-form input{font-family:inherit;transition:border-color .15s ease;}
.magnet-form input:hover{border-color:var(--accent);}
.magnet-form input:disabled{opacity:.55;}
.magnet-form button{font-family:inherit;cursor:pointer;transition:transform .15s ease, opacity .15s ease;}
.magnet-form button:hover{transform:translateY(-1px);}
.magnet-form button:disabled{opacity:.6;cursor:default;transform:none;}
.hp-inline{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;}
.magnet-msg{margin:14px 0 0;font-size:14px;line-height:1.6;font-weight:600;}
.magnet-msg:empty{display:none;}
.magnet-msg.is-busy{color:var(--sub);font-weight:600;}
.magnet-msg.is-bad{color:#c0392b;}
.magnet-msg.is-ok{color:var(--ink);background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:12px;padding:16px 18px;font-weight:600;}
.magnet-msg a{color:var(--accent-dark);text-decoration:underline;font-weight:700;}
.magnet-fine{margin:12px 0 0;font-size:12.5px;color:var(--sub);line-height:1.55;}
.magnet-fine a{color:var(--accent-dark);text-decoration:underline;}
:root[data-theme="dark"] .magnet-msg.is-bad{color:#ff8a7a;}
@media (max-width:620px){
  .magnet-form{width:100%;flex-direction:column;align-items:stretch;}
  .magnet-form input{width:100%;}
}

/* --- Turnstile widget slot --- */
.turnstile-slot{margin:18px 0 0;min-height:0;}
.turnstile-slot:empty{display:none;}
.turnstile-slot iframe{max-width:100%;}
.magnet .turnstile-slot,.magnet + .turnstile-slot{margin-top:14px;}
#tsChecklist{max-width:320px;}

/* --- Send a gift: header button and two-step dialog ---
   All selectors here are new, so nothing above is overridden. Colours come
   from the theme tokens, which is what makes the dialog work in both
   themes without a second rule set. */
.gift-toggle{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1;
  cursor:pointer;padding:0;transition:border-color .16s,transform .16s;}
.gift-toggle:hover{border-color:var(--accent);transform:translateY(-1px);}
.gift-toggle .icon-gift{display:inline-flex;}

/* The overlay is display:flex when open, so [hidden] needs to win. */
.gift-overlay{position:fixed;inset:0;z-index:120;background:rgba(11,18,48,.62);
  backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;
  padding:5vh 18px;overflow-y:auto;}
.gift-overlay[hidden]{display:none;}
:root[data-theme="dark"] .gift-overlay{background:rgba(0,0,0,.72);}
body.gift-open{overflow:hidden;}

.gift-dialog{position:relative;width:100%;max-width:620px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-mega);
  padding:26px 28px 28px;margin:auto;}
.gift-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:var(--bg-alt);color:var(--ink);font-size:20px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.gift-close:hover{border-color:var(--accent);color:var(--accent-dark);}

.gift-card{background:var(--grad-booking);color:#fff;border-radius:14px;padding:18px 20px;
  display:flex;flex-direction:column;gap:2px;margin:0 0 20px;box-shadow:var(--shadow-cta);
  position:relative;}
.gift-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;}
/* The R mark is a cyan-to-purple outline, which would vanish into the card's
   own teal-to-purple gradient. The white chip is what makes it legible. */
.gift-card-mark{width:40px;height:40px;border-radius:11px;background:#fff;
  display:flex;align-items:center;justify-content:center;flex:none;
  box-shadow:0 2px 8px rgba(11,18,48,.18);}
.gift-card-mark img{width:21px;height:auto;display:block;}
.gift-card-tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;opacity:.9;}
.gift-card-amount{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1;}
.gift-card-amount span{font-size:22px;}
.gift-card-sub{font-size:12.5px;opacity:.92;}

/* Promotion code, pressed into the card below the header the way a printed
   voucher carries one.
   Absolute, and that is the point: in the flex row it counted as a third child
   and space-between pushed GIFT CARD in off the right edge. Out of the flow,
   the header returns to mark-left / tag-right and the code sits clear of it.
   Both offsets are the card's own padding, so the alignment holds without
   magic numbers: right:20px puts it on the same edge as GIFT CARD above it,
   bottom:18px puts it on the Riverside Digital Studio line.
   line-height:19px is that line's box - 12.5px sub text at the inherited 1.55.
   Matching it means both boxes share a height and a bottom, so the two sit
   centred against each other rather than merely bottom-aligned, which is what
   8px text beside 12.5px would otherwise do.
   The glyphs are transparent - what shows is the text-shadow, so it reads as an
   impression rather than as text. The dark shadow does the work; the faint
   light one above gives the engraved edge. Both are tuned against the card's
   own gradient, so judge any change there, not on a flat colour.
   The card is aria-hidden, so this is decorative only - if the code ever has
   to be acted on, it needs to appear in readable copy as well. */
.gift-card-code{position:absolute;right:20px;bottom:18px;
  font-size:8px;line-height:19px;font-weight:800;letter-spacing:.08em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:transparent;
  text-shadow:0 1px 1px rgba(0,0,0,.20), 0 -1px 0 rgba(255,255,255,.05);
  pointer-events:none;user-select:none;}

.gift-dialog h2{font-size:21px;margin:0 0 6px;letter-spacing:-.01em;}
.gift-intro{margin:0 0 20px;font-size:14px;color:var(--sub);line-height:1.6;}
.gift-form{max-width:none;}
.gift-form .field{margin-bottom:16px;}
.gift-note{margin:4px 0 0;font-size:12.5px;color:var(--sub);line-height:1.55;}

.gift-actions{display:flex;gap:10px;align-items:center;margin-top:4px;}
.gift-actions .gift-next{margin-left:auto;cursor:pointer;}
.gift-back{background:var(--bg-alt);color:var(--ink);cursor:pointer;}
.gift-back:hover{border-color:var(--accent);}
.gift-actions button:disabled{opacity:.6;cursor:default;}

.gift-dots{display:flex;gap:6px;justify-content:center;margin:16px 0 0;}
.gift-dots span{width:7px;height:7px;border-radius:50%;background:var(--line);}
.gift-dots span.is-on{background:var(--accent);}

.gift-msg{margin:14px 0 0;font-size:14px;line-height:1.6;font-weight:600;}
.gift-msg:empty{display:none;}
.gift-msg.is-busy{color:var(--sub);}
.gift-msg.is-bad{color:#c0392b;}
.gift-msg.is-ok{color:var(--ink);background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:12px;padding:16px 18px;}
.gift-msg.is-ok p{margin:8px 0 0;font-weight:500;}
.gift-msg a{color:var(--accent-dark);text-decoration:underline;font-weight:700;}
:root[data-theme="dark"] .gift-msg.is-bad{color:#ff8a7a;}
#tsGift{max-width:320px;}

@media (max-width:620px){
  .gift-overlay{padding:0;}
  .gift-dialog{border-radius:0;min-height:100%;padding:22px 18px 26px;}
  .gift-card-amount{font-size:30px;}
}
@media (prefers-reduced-motion:reduce){
  .gift-toggle{transition:none;}
  .gift-toggle:hover{transform:none;}
}

/* =========================================================================
   CONSULTATION BOOKING - start-a-project.html
   Two ways in: a short consultation request, and the full project brief that
   was already here. The chooser is plain anchor links to two sections rather
   than tabs, so both forms exist in the document with no JavaScript deciding
   what is reachable - the page degrades to a long scroll instead of a blank.
   ========================================================================= */
.path-choice{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:820px;margin:0 0 38px;}
.path-card{display:flex;flex-direction:column;text-decoration:none;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 22px;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;}
.path-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-cta);}
.path-card:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;}
.path-card.is-lead{border-color:var(--accent);border-width:2px;padding:23px 23px 21px;}
.path-kicker{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-dark);margin:0 0 8px;}
.path-card h3{font-size:19px;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px;line-height:1.3;}
.path-card p{font-size:14.5px;line-height:1.6;color:var(--sub);margin:0 0 16px;flex:1;}
.path-go{font-size:14px;font-weight:700;color:var(--accent-dark);}
.path-go::after{content:"\00a0\2192";}

.book-head{max-width:820px;margin:0 0 20px;}
.book-head h2{font-size:24px;letter-spacing:-.01em;}
.book-head p{color:var(--sub);font-size:15px;line-height:1.65;margin-top:10px;}

/* Preference blocks. Two of them, second optional - a request needs a couple
   of options, not a calendar. */
.slot-block{border:1px solid var(--line);border-radius:12px;background:var(--bg-alt);
  padding:18px 20px 4px;margin:0 0 18px;}
.slot-block > .slot-title{font-size:13.5px;font-weight:800;color:var(--ink);margin:0 0 14px;}
.slot-block > .slot-title span{font-weight:600;color:var(--sub);}

.tz-note{font-size:13px;color:var(--sub);line-height:1.55;margin:0 0 18px;
  padding:11px 14px;background:var(--accent-soft);border-radius:10px;}
.tz-note b{color:var(--accent-dark);}

.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.mode-grid .opt{margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);align-items:center;}
.mode-grid .opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft);}
.mode-grid .opt:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px;}

@media (max-width:760px){
  .path-choice{grid-template-columns:1fr;}
  .mode-grid{grid-template-columns:1fr;}
}