/* CraneHive — stylesheet (extracted from inline <style>, unchanged content). */

  /* ============ THEME SYSTEM ============
     Two complete, independent theme sets on CSS custom properties.
     [data-theme="light"] on <html> overrides every token below.
     The hero 3D stage intentionally stays on its own fixed dark palette
     regardless of site theme -- a deliberate, common pattern (Stripe/Linear/
     Vercel do the same) because emissive/glowing 3D materials read poorly
     on a bright background. Documented here so it's not a silent deviation. */
  :root{
    --bg:#1A1F2E; --bg-alt:#20263A;
    --text:#FFFFFF; --text-dim:#C3C8D6; --text-faint:#8B92A5;
    --card-bg:#2A2F3E; --card-border:rgba(255,255,255,0.1); --card-shadow:none;
    --accent:#F39C0E; --accent-2:#236ADE; --accent-dim:rgba(243,156,14,0.35); --accent2-dim:rgba(35,106,222,0.35);
    --radius:14px;
    --ease:cubic-bezier(0.16,1,0.3,1);
    --hero-bg:#0D1933; --hero-panel:#16233F;
    /* Shared spacing scale — one source of truth for section rhythm and
       gutters so vertical spacing stays even and content never crowds the
       viewport edges. */
    --gutter:clamp(24px,5.5vw,72px);
    --section-y:clamp(76px,9vw,116px);
  }
  html[data-theme="light"]{
    --bg:#F8F9FA; --bg-alt:#FFFFFF;
    --text:#1A1F2E; --text-dim:#4A5068; --text-faint:#6B7288;
    --card-bg:#FFFFFF; --card-border:rgba(26,31,46,0.09); --card-shadow:0 4px 24px rgba(20,24,38,0.08);
    --accent:#F39C0E; --accent-2:#236ADE; --accent-dim:rgba(243,156,14,0.3); --accent2-dim:rgba(35,106,222,0.3);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;transition:background .3s ease,color .3s ease;}
  h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.01em;}
  img,canvas{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;}
  .container{max-width:1280px;margin:0 auto;padding:0 clamp(24px,5.5vw,72px);}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
  .skip-link{position:fixed;top:-60px;left:16px;z-index:400;background:var(--accent);color:#0D1933;padding:12px 20px;border-radius:8px;font-weight:700;transition:top .2s ease;}
  .skip-link:focus{top:16px;}
  @media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}}
  .label{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;font-weight:600;}
  .label::before{content:"";width:20px;height:1px;background:var(--accent-dim);}
  .reveal{opacity:1;transform:none;}
  html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
  html.js .reveal.visible{opacity:1;transform:translateY(0);}
  section[id]{scroll-margin-top:88px;}

  /* ============ BUTTONS ============ */
  .btn{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:100px;font-size:.92rem;font-weight:600;border:none;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s ease;}
  .btn-primary{background:var(--accent);color:#1A1300;}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px var(--accent-dim);}
  .btn-ghost{background:transparent;border:1.5px solid var(--card-border);color:var(--text);}
  .btn-ghost:hover{border-color:var(--accent-dim);transform:translateY(-2px);}
  /* The hero stage stays visually dark regardless of the site-wide light/dark
     toggle (see THEME SYSTEM note above), so buttons inside it must NOT use
     the theme-dependent --text color -- in light mode that resolves to dark
     navy text on a dark navy hero, which is unreadable. Fixed white instead. */
  .hero .btn-ghost{color:#FFFFFF;border-color:rgba(255,255,255,0.3);}
  .hero .btn-ghost:hover{border-color:#F39C0E;}

  /* ============ NAV ============ */
  nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;background:var(--bg);background:color-mix(in srgb, var(--bg) 82%, transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--card-border);}
  .nav-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;}
  .logo{display:inline-flex;align-items:center;gap:9px;font-family:'Inter',sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:-0.01em;}
  .logo-icon{width:26px;height:26px;}
  .nav-links{display:none;list-style:none;gap:32px;font-size:.88rem;color:var(--text-dim);}
  .nav-links a:hover{color:var(--text);}
  .nav-links a.active{color:var(--accent);font-weight:600;}
  .nav-right{display:flex;align-items:center;gap:10px;}
  .theme-toggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--card-border);background:var(--card-bg);display:flex;align-items:center;justify-content:center;}
  .theme-toggle svg{width:18px;height:18px;}
  .theme-toggle .icon-sun{display:none;}
  html[data-theme="light"] .theme-toggle .icon-sun{display:block;}
  html[data-theme="light"] .theme-toggle .icon-moon{display:none;}
  .nav-toggle{background:var(--card-bg);border:1px solid var(--card-border);border-radius:8px;color:var(--text);font-size:.85rem;min-height:40px;padding:0 14px;}
  @media(min-width:900px){.nav-links{display:flex;}.nav-toggle{display:none;}}

  /* Mobile nav as a native <dialog> = free focus-trap + Escape handling */
  dialog#mobileNav{border:none;padding:0;background:transparent;max-width:100vw;width:100vw;max-height:100vh;height:100vh;margin:0;}
  dialog#mobileNav::backdrop{background:var(--bg);}
  .mobilenav-inner{background:var(--bg);height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 32px;position:relative;}
  .mobilenav-inner ul{list-style:none;display:flex;flex-direction:column;gap:22px;margin-bottom:32px;}
  .mobilenav-inner a{font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:600;}
  .mobilenav-close{position:absolute;top:22px;right:22px;width:44px;height:44px;border-radius:50%;border:1px solid var(--card-border);background:var(--card-bg);color:var(--text);font-size:1.3rem;}

  /* ============ HERO (fixed dark stage, theme-independent) ============
     Left-aligned headline over a directional scrim, with the 3D cluster
     sitting to the right on wide screens and behind the (centred) text on
     narrow ones. */
  .hero{position:relative;min-height:100svh;background:var(--hero-bg);color:#FFFFFF;overflow:hidden;}
  #heroCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;}
  /* Directional scrim: darkest on the left where the text lives, clearing to
     the right so the 3D cluster stays crisp. */
  .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(90deg, var(--hero-bg) 4%, rgba(13,25,51,0.82) 30%, rgba(13,25,51,0.30) 55%, rgba(13,25,51,0) 72%),
      linear-gradient(0deg, var(--hero-bg) 0%, rgba(13,25,51,0) 26%);}
  .hero-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;opacity:1;transition:opacity .4s ease;pointer-events:none;}
  .hero-loading.hidden{opacity:0;}
  .hero-loading-spinner{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,0.15);border-top-color:#F39C0E;animation:hero-spin .8s linear infinite;}
  @keyframes hero-spin{to{transform:rotate(360deg);}}
  .hero-fallback{position:absolute;inset:0;z-index:1;display:none;align-items:center;justify-content:flex-end;padding:0 clamp(24px,6vw,90px);}
  .hero-fallback.show{display:flex;}
  .hero-fallback svg{width:min(440px,68vw);height:auto;opacity:.95;animation:hero-fallback-float 6s ease-in-out infinite;}
  @keyframes hero-fallback-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

  .hero-container{position:relative;z-index:5;min-height:100svh;display:flex;align-items:center;padding-top:96px;padding-bottom:64px;}
  .hero-inner{max-width:600px;text-align:left;}
  .hero-kicker{display:inline-block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:24px;padding:7px 14px;border:1px solid rgba(243,156,14,0.28);border-radius:100px;background:rgba(243,156,14,0.06);}
  .hero h1{font-size:clamp(2.4rem,5.6vw,4.4rem);font-weight:700;line-height:1.05;letter-spacing:-0.02em;margin-bottom:22px;}
  .hero p.sub{font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.65;color:rgba(255,255,255,0.74);max-width:46ch;margin-bottom:36px;}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:22px;}
  .hero-reassurance{font-size:.8rem;color:rgba(255,255,255,0.5);letter-spacing:.02em;}
  /* "Watch/see" style secondary CTA with a leading play glyph. */
  .btn-play{gap:11px;padding-left:8px;}
  .play-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.22);}
  .play-icon svg{width:14px;height:14px;margin-left:1px;}
  .btn-play:hover .play-icon{background:rgba(243,156,14,0.18);border-color:var(--accent);}

  @media(max-width:860px){
    /* Stack: centre the text, let the cluster sit behind it. */
    .hero-container{padding-top:104px;justify-content:center;}
    .hero-inner{text-align:center;margin:0 auto;}
    .hero-kicker{margin-inline:auto;}
    .hero p.sub{margin-inline:auto;}
    .hero-ctas{justify-content:center;}
    .hero-scrim{background:
      linear-gradient(180deg, rgba(13,25,51,0.62) 0%, rgba(13,25,51,0.86) 42%, rgba(13,25,51,0.94) 100%);}
    .hero-fallback{justify-content:center;}
  }

  /* ============ SERVICE DRAWER (native dialog, slide-over) ============ */
  dialog#serviceDrawer{border:none;padding:0;background:transparent;max-width:min(440px,92vw);width:min(440px,92vw);height:100%;max-height:100vh;margin:0 0 0 auto;}
  dialog#serviceDrawer::backdrop{background:rgba(10,10,16,0.55);backdrop-filter:blur(3px);}
  .drawer-inner{background:var(--card-bg);color:var(--text);height:100%;overflow-y:auto;padding:30px clamp(22px,4vw,34px) 40px;position:relative;border-left:1px solid var(--card-border);}
  .drawer-close{position:sticky;top:0;float:right;width:40px;height:40px;border-radius:50%;border:1px solid var(--card-border);background:var(--bg);color:var(--text);font-size:1.2rem;}
  .drawer-eyebrow{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:50px 0 10px;font-weight:600;}
  .drawer-title{font-size:1.5rem;font-weight:700;margin-bottom:14px;}
  .drawer-body p{color:var(--text-dim);line-height:1.65;margin-bottom:18px;font-size:.95rem;}
  .drawer-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
  .drawer-tags span{font-size:.74rem;color:var(--text-dim);border:1px solid var(--card-border);border-radius:100px;padding:5px 12px;}

  /* ============ TRUST BAR ============ */
  .trust-bar{padding-block:32px;border-bottom:1px solid var(--card-border);}
  .trust-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px;}
  .trust-statement{font-size:.92rem;color:var(--text-dim);}
  .trust-industries{list-style:none;display:flex;flex-wrap:wrap;gap:18px;font-size:.82rem;color:var(--text-faint);}

  /* ============ PROBLEM / SOLUTION (merged) ============ */
  .problem-solution{padding-block:clamp(76px,9vw,116px);}
  .ps-headline{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:700;max-width:18ch;margin-bottom:40px;}
  .problem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:56px;}
  .problem-card{background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--radius);padding:24px 22px;}
  .problem-card .pc-icon{font-size:1.3rem;color:var(--accent);margin-bottom:12px;}
  .problem-card p{color:var(--text-dim);font-size:.92rem;line-height:1.55;}
  .solution-statement{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:600;line-height:1.35;max-width:22ch;margin-bottom:40px;}
  .solution-statement em{color:var(--accent);font-style:normal;}
  .why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
  .why-card{background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--radius);padding:22px 22px;}
  .why-card h3{font-size:.98rem;font-weight:700;margin-bottom:8px;}
  .why-card p{color:var(--text-dim);font-size:.88rem;line-height:1.55;}

  .who-we-work{padding-block:clamp(64px,8vw,104px) clamp(76px,9vw,116px);}
  .who-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
  .who-list li{position:relative;padding-left:24px;font-size:.92rem;color:var(--text-dim);}
  .who-list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:2px;background:var(--accent);}

  /* ============ SERVICES ============ */
  .services{padding-block:clamp(76px,9vw,116px);background:var(--bg-alt);}
  .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
  .service-card{background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--radius);padding:28px 26px;text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer;display:block;position:relative;}
  .service-card .sc-num{font-family:'Space Grotesk',sans-serif;font-size:.78rem;color:var(--accent-2);font-weight:600;margin-bottom:10px;}
  .service-card h3{font-size:1.12rem;font-weight:700;margin-bottom:14px;}
  .service-card .sc-problem{color:var(--text-faint);font-size:.88rem;margin-bottom:8px;}
  .service-card .sc-solution{color:var(--text-dim);font-size:.92rem;line-height:1.55;}
  .service-card .sc-solution strong{color:var(--text);font-weight:600;}
  .service-card .sc-more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:.82rem;font-weight:600;color:var(--accent-2);}
  .service-card .sc-more::after{content:"→";transition:transform .25s var(--ease);}
  .service-card:hover .sc-more::after,.service-card.active .sc-more::after{transform:translateX(4px);}
  .service-card.active{border-color:var(--accent);}

  /* ============ CASE STUDIES (native <details>, no JS/dialog needed) ============ */
  .case-studies{padding-block:clamp(76px,9vw,116px);}
  .case-list{display:flex;flex-direction:column;gap:14px;}
  .case-card{background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--radius);overflow:hidden;}
  .case-card summary{list-style:none;cursor:pointer;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;}
  .case-card summary::-webkit-details-marker{display:none;}
  .case-card summary .cs-meta{display:flex;flex-direction:column;gap:4px;}
  .case-card summary .cs-cat{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
  .case-card summary .cs-title{font-size:1.15rem;font-weight:700;}
  .case-card summary .chevron{flex-shrink:0;transition:transform .25s ease;color:var(--text-faint);}
  .case-card[open] summary .chevron{transform:rotate(180deg);}
  .case-card .cs-body{padding:0 24px 26px;color:var(--text-dim);line-height:1.65;font-size:.94rem;}
  .case-card .cs-field{margin-bottom:16px;}
  .case-card .cs-field-label{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);font-weight:600;margin-bottom:5px;}
  .case-card .cs-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
  .case-card .cs-tags span{font-size:.72rem;color:var(--text-faint);border:1px solid var(--card-border);border-radius:100px;padding:4px 11px;}
  .case-card .cs-detail-link{display:inline-block;margin-top:14px;font-size:.86rem;color:var(--accent-2);font-weight:600;}
  .case-card .cs-detail-link:hover{text-decoration:underline;}

  /* ============ TESTIMONIALS ============ */
  .testimonials{padding-block:clamp(76px,9vw,116px);background:var(--bg-alt);}
  .t-grid{columns:1;column-gap:18px;}
  @media(min-width:700px){.t-grid{columns:2;}}
  .t-card{break-inside:avoid;margin-bottom:18px;background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--radius);padding:26px;}
  .t-card p{color:var(--text-dim);line-height:1.6;font-size:1rem;margin-bottom:16px;}
  .t-card .t-name{font-weight:700;font-size:.9rem;color:var(--text);}

  /* ============ FAQ ============ */
  /* ============ HOW WE WORK ============ */
  .process{padding-block:clamp(76px,9vw,116px);background:var(--bg-alt);}
  .process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:36px;}
  .process-step{border:1px solid var(--card-border);border-radius:var(--radius);padding:22px 20px;background:var(--card-bg);box-shadow:var(--card-shadow);}
  .process-step .ps-num{font-family:'Space Grotesk',sans-serif;font-size:.85rem;color:var(--accent);font-weight:700;margin-bottom:10px;}
  .process-step h3{font-size:1rem;font-weight:700;margin-bottom:8px;}
  .process-step p{color:var(--text-dim);font-size:.86rem;line-height:1.5;}
  .process-cta{text-align:center;}

  /* Horizontal padding here (not just top/bottom) so FAQ text keeps a safe
     gutter on viewports narrower than its 820px max-width -- without it the
     label, heading and items ran flush to the screen edges on mobile. */
  .faq{padding:clamp(76px,9vw,116px) clamp(24px,5.5vw,72px);max-width:calc(820px + 2*clamp(24px,5.5vw,72px));margin:0 auto;}
  .faq-item{border:1px solid var(--card-border);border-radius:12px;background:var(--card-bg);box-shadow:var(--card-shadow);margin-bottom:10px;padding:20px 24px;}
  .faq-item summary{cursor:pointer;list-style:none;font-weight:600;font-size:1rem;display:flex;justify-content:space-between;gap:14px;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:"+";color:var(--accent);font-size:1.2rem;flex-shrink:0;}
  .faq-item[open] summary::after{content:"–";}
  .faq-item p{margin-top:14px;color:var(--text-dim);line-height:1.6;font-size:.92rem;}

  /* ============ FINAL CTA + FORM ============ */
  .final{padding-block:clamp(80px,10vw,130px) 40px;text-align:center;}
  .final h2{font-size:clamp(2rem,5vw,3.2rem);font-weight:700;max-width:16ch;margin:0 auto 18px;}
  .final p.sub{color:var(--text-dim);max-width:46ch;margin:0 auto 34px;font-size:1rem;}
  .contact{padding-bottom:clamp(70px,9vw,120px);}
  form#briefForm{max-width:580px;margin:0 auto;background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:20px;padding:clamp(28px,4vw,44px);}
  .field{margin-bottom:22px;}
  .field label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);margin-bottom:8px;font-weight:600;}
  .field input,.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--card-border);border-radius:10px;padding:12px 14px;color:var(--text);font-size:1rem;font-family:inherit;transition:border-color .25s ease;}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;}
  .field textarea{resize:vertical;min-height:100px;}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  @media(max-width:520px){.field-row{grid-template-columns:1fr;}}
  .field-error{display:none;color:#E5484D;font-size:.78rem;margin-top:6px;}
  .field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#E5484D;}
  .field.has-error .field-error{display:block;}
  .submit-btn{width:100%;justify-content:center;}
  .submit-btn .spinner{display:none;width:14px;height:14px;border:2px solid rgba(0,0,0,.25);border-top-color:#1A1300;border-radius:50%;animation:spin .7s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .submit-btn.loading .btn-label{opacity:.5;}
  .submit-btn.loading .spinner{display:inline-block;}
  #formSuccess,#formError{display:none;max-width:580px;margin:20px auto 0;padding:18px 22px;border-radius:12px;font-size:.92rem;line-height:1.6;}
  #formSuccess{background:rgba(35,106,222,0.1);border:1px solid var(--accent2-dim);color:var(--text);}
  #formError{background:rgba(229,72,77,0.08);border:1px solid rgba(229,72,77,0.3);color:var(--text-dim);}
  #formError a{color:var(--accent);text-decoration:underline;}
  .form-reassurance{font-size:.78rem;color:var(--text-faint);text-align:center;margin-top:14px;}
  .field label .opt{text-transform:none;letter-spacing:0;color:var(--text-faint);font-weight:400;}

  .whats-next{max-width:580px;margin:44px auto 0;text-align:center;}
  .whats-next-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:4px;}
  .whats-next-list li{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-dim);}
  .whats-next-list .wn-num{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--accent-2);font-size:.82rem;}

  /* ============ FOOTER ============ */
  footer{border-top:1px solid var(--card-border);padding:48px 0 32px;}
  .footer-row{display:flex;flex-direction:column;gap:20px;}
  @media(min-width:700px){.footer-row{flex-direction:row;justify-content:space-between;align-items:center;}}
  .footer-tagline{color:var(--text-dim);font-size:.9rem;}
  .footer-nav{list-style:none;display:flex;gap:22px;flex-wrap:wrap;}
  .footer-nav a{color:var(--text-dim);font-size:.86rem;}
  .footer-meta{color:var(--text-faint);font-size:.76rem;margin-top:24px;}
  .footer-prefsrc{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px;padding-top:22px;border-top:1px solid var(--card-border);}
  .footer-prefsrc-label{font-size:.82rem;color:var(--text-dim);}

  /* ============ POLISH PASS ============
     Grouped, documented refinements layered on top of the base styles:
     more consistent breathing room, clearer card hierarchy, and disciplined
     interaction feedback (not a hover on every element). */

  /* Trust bar: a touch more air and a clearer separation between the
     statement and the industry list. */
  .trust-bar{padding-block:clamp(30px,4vw,46px);}
  .trust-inner{gap:14px 28px;}
  .trust-statement{font-weight:500;color:var(--text);}
  .trust-industries li{position:relative;padding-left:16px;}
  .trust-industries li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:1px;background:var(--accent);opacity:.75;}

  /* Slightly more generous grid gaps so cards don't crowd each other. */
  .problem-grid{gap:18px;}
  .why-grid{gap:18px;}
  .services-grid{gap:20px;}
  .process-grid{gap:16px;}
  .who-list{gap:14px 18px;}

  /* "Why us" cards carry an amber edge — a structural cue that marks them as
     CraneHive's strengths, distinct from the neutral problem cards above. */
  .why-card{border-left:3px solid var(--accent);padding-left:20px;}

  /* One disciplined interaction: cards that are genuinely interactive (the
     case studies) and the service cards lift subtly on hover. Reduced-motion
     users get the color change without the movement. */
  .service-card,.case-card{transition:transform .25s var(--ease),border-color .25s ease,box-shadow .25s ease;}
  @media (hover:hover){
    .service-card:hover{transform:translateY(-3px);border-color:var(--accent-dim);}
    .case-card:hover{border-color:var(--accent-dim);}
  }

  /* Give the contact form and success/error panels a little more separation
     from the CTA section above them on small screens. */
  .final{padding-bottom:clamp(28px,4vw,44px);}

  /* Keep the fixed nav from ever sitting flush to the viewport edge and make
     the wordmark a touch more prominent. */
  .logo span{letter-spacing:-0.02em;}


  /* ============ SECTION RHYTHM (normalised) ============
     One consistent spacing model for every section intro, replacing the
     per-heading inline margins that drifted between 12–36px. The title sits
     close to an intro paragraph when one follows, and further from a grid
     when it doesn't — handled with :has() so the markup stays clean. */
  .section-title{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:700;line-height:1.14;letter-spacing:-0.01em;max-width:24ch;margin-bottom:clamp(30px,3.6vw,42px);}
  .section-title:has(+ .section-intro){margin-bottom:14px;}
  .section-intro{color:var(--text-dim);max-width:60ch;line-height:1.6;margin-bottom:clamp(30px,3.6vw,42px);}
  .section-intro--faint{color:var(--text-faint);font-size:.9rem;}
  /* Guarantee a comfortable gap between the eyebrow label and its heading. */
  .label{margin-bottom:16px;}

  /* Honeypot: off-screen rather than display:none, which some bots skip. */
  .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}