/* Shared hero for the area pages (create/make/show/sell/care/explore). */
  html{ scroll-behavior:smooth; }
  /* Hero headline only: extremely condensed grotesque (League Gothic, OFL) as a free stand-in for Druk Condensed. Section titles stay Open Sans. */
  .kht-home-hero h1{ font-family:"League Gothic",Impact,"Arial Narrow",sans-serif; font-weight:400; font-size:clamp(88px,10.6vw,176px); line-height:.84; letter-spacing:.005em !important; text-transform:uppercase; margin-left:-.04em; }
  body{ margin:0; background:var(--green-950); }
  @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
  [id]{ scroll-margin-top:80px; }
    display:inline-flex; align-items:center; gap:.12em;
    font:inherit; line-height:inherit; letter-spacing:inherit;
    color:inherit; text-decoration:none;
  }
  .kht-dark .kht-rail__btn{ text-decoration:none; color:var(--rail-color,var(--green-400)); transition:color 140ms ease,transform 140ms ease; }
  .kht-dark .kht-rail__btn:hover,
  .kht-dark .kht-rail__btn:focus-visible{ color:var(--area-color,#fff); transform:translateX(-4px); }
  .kht-rail__btn:hover .kht-rail__bar,
  .kht-rail__btn:focus-visible .kht-rail__bar{ width:24px; }
  /* Rail: smaller, further out, low contrast. Only the current area and the hovered entry take their area colour. */
  .kht-dark .kht-rail{ right:var(--rail-right); }
  .kht-dark .kht-rail__btn{ gap:6px; min-width:0; }
  .kht-dark .kht-rail__btn:last-child{ margin-top:12px; }
  .kht-dark .kht-rail__btn{ font-size:10.5px; }
  .kht-dark .kht-rail__bar{ width:10px; }
  .kht-dark .kht-rail__btn--active .kht-rail__bar{ width:24px; }
  .kht-dark .kht-rail__btn:focus-visible{ outline:2px solid #fff; outline-offset:5px; }
  @media(prefers-reduced-motion:reduce){ .kht-dark .kht-rail__btn,.kht-rail__bar{ transition:none; } .kht-dark .kht-rail__btn:hover,.kht-dark .kht-rail__btn:focus-visible{ transform:none; } }

  /* Angled topic links on the home page; labels retain upright lettering. */
    transform:skewX(-12deg);
    min-height:44px; box-sizing:border-box; max-width:100%;
    text-decoration:none;
  }
    transform:skewX(12deg); overflow-wrap:anywhere;
  }
    outline:2px solid var(--accent,#dcfb55); outline-offset:4px;
  }
  .kht-home-hero__cta-row{ align-items:last baseline; }

  /* Hero rhythm (measured on the mockup at 1536px): headline sits close to the eyebrow, description hugs the headline,
     link and search form one group, and the whole hero fits into the first screen. */
  /* Same start as the other heroes: their title sits at header (84px) + hero padding clamp(44px,6vw,84px) from the top of the page.
     The headline is placed there; the eyebrow (18px + its margin) sits above it. */
  .kht-home-hero{ --hero-pt:calc(var(--hdr-ref) + clamp(44px,6vw,84px) - 18px - clamp(18px,2vw,30px)); padding-top:var(--hero-pt); padding-bottom:clamp(28px,3vw,44px); }
  .kht-home-hero__eyebrow{ margin-bottom:clamp(18px,2vw,30px); margin-left:-1px; }
  .kht-home-hero__cta-row p{ color:#c2cab9; font-size:19.5px; max-width:510px; text-wrap:pretty; }
  @media(max-width:600px){ .kht-br{ display:none; } .kht-home-hero__cta-row p{ max-width:none; } }
  .kht-home-hero__cta-row{ display:block; margin-top:clamp(4px,.5vw,10px); }
  .kht-home-hero .kht-search{ margin-top:clamp(18px,2vw,28px); }
  /* The first screen holds only eyebrow, headline and description; link, search and status row appear on the first scroll. */
  .kht-home-hero__cover{ min-height:calc(100svh - var(--hero-pt)); }
  .kht-home-hero__tools{ padding-top:clamp(20px,3vw,44px); }


  

  /* Landscape: keep text and search in the left ~45%, so nothing runs into the plywood edge (starts at ~52%). */
  @media(min-width:801px) and (min-aspect-ratio:1/1){
    .kht-home-hero__cta-row p{ max-width:min(510px,38vw); }
    .kht-home-hero .kht-search{ max-width:min(680px,44vw); }
  }

  /* Header on the hero grid: same left/right axis as the content (centred 1320px column), 70px instead of 84px, a hairline instead of the bright rule. */
  .kht-dark{ --pad:clamp(20px,5vw,72px); --hdr:70px; --hdr-ref:84px; --rail-right:calc(clamp(4px,.7vw,12px) + 30px); }
  @media(max-width:759px){ .kht-dark{ --hdr:60px; --hdr-ref:72px; } }
  /* Glass header: it overlaps the hero (negative bottom margin), so the photo and its turquoise light continue behind it. */
  .kht-dark .kht-site-header{ height:var(--hdr); margin-bottom:calc(-1 * var(--hdr)); padding-inline:calc(var(--pad) + max(0px,(100% - 2 * var(--pad) - var(--content-max)) / 2)); background:rgba(10,22,16,.16); border-bottom:1px solid rgba(247,245,239,.34); box-shadow:inset 0 1px 0 rgba(247,245,239,.06),0 1px 28px rgba(247,245,239,.05); }
  /* /start ends on the same right edge as the area rail (visible from 1241px). */
  @media(min-width:1241px){ .kht-dark .kht-site-header{ padding-right:var(--rail-right); } }
  .kht-dark .kht-site-payoff{ font-size:11.5px; font-weight:400; letter-spacing:.08em; color:#b6bfae; }

  /* Hero study: bent-plywood photo behind the content. The plain photo is used as delivered; the ::after overlay only darkens the text side. */
  .kht-home-hero{position:relative;overflow:hidden;isolation:isolate;}
  .kht-hero-photo{position:absolute;inset:0 0 auto 0;height:100svh;z-index:-2;overflow:hidden;container-type:size;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 38%,transparent 80%);mask-image:linear-gradient(180deg,#000 0,#000 38%,transparent 80%);}
  /* Behaves like background-size:cover at 60% / 50%, so the masks stay aligned at every viewport ratio.
     The 1.65 aspect (photo is 1.5) squashes the picture vertically by about 9%. */
  .kht-hero-photo__stage{position:absolute;width:max(100cqw,165cqh - 115.5px);aspect-ratio:1.65;left:calc((100cqw - max(100cqw,165cqh - 115.5px)) * .6);top:calc(70px + (100cqh - 70px - max(60.606cqw,100cqh - 70px)) * .5);transform:translateX(3cqw) scale(.96);}
  /* Image treatment: four copies of the photo, all masked in photo coordinates (1536 x 1024).
     base  = the photo as delivered, only the left (green atmosphere), the chair is masked out here
     soft  = the chair, blurred, dark, its surface grain gone: fades into black/green towards the right and the bottom
     mid   = a little blur, dimmer wood: carries the plywood edge just beyond the radius
     focus = sharp, bright: the upper radius (~52-60% / 25-40%) is the single point of attention */
  /* The base layer overshoots to the left/top/bottom so the shrunken photo never shows an edge. It is stretched, so it must be gone before the chair leg (photo x 48.8%) to avoid a ghost of the plywood edge; mask % refer to the photo. */
  .kht-hero-photo__stage > .kht-hero-photo__base{inset:0 0 0 -10%;filter:brightness(.87) saturate(1.05);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 40%,transparent 47%);mask-image:linear-gradient(90deg,#000 0,#000 40%,transparent 47%);}
  /* Caps: the top 30% of the photo mirrored above its upper edge (seamless at the seam), so the turquoise light reaches the top of the page. */
  .kht-hero-photo__stage > .kht-hero-photo__cap-base,.kht-hero-photo__stage > .kht-hero-photo__cap-soft{inset:auto 0 100% 0;height:30%;transform:translateY(24px) scaleY(-1);background-size:100% 333.333%;background-position:0 0;}
  .kht-hero-photo__stage > .kht-hero-photo__cap-base{left:-10%;filter:brightness(.87) saturate(1.05);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 40%,transparent 47%);mask-image:linear-gradient(90deg,#000 0,#000 40%,transparent 47%);}
  .kht-hero-photo__stage > .kht-hero-photo__cap-soft{filter:blur(8px) brightness(.5) saturate(.8);-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 47%);mask-image:linear-gradient(90deg,transparent 40%,#000 47%);}
  .kht-hero-photo__soft{filter:blur(8px) brightness(.5) saturate(.8);-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 47%);mask-image:linear-gradient(90deg,transparent 40%,#000 47%);}
  .kht-hero-photo__mid{filter:blur(3px) brightness(.68) saturate(.95);-webkit-mask-image:radial-gradient(ellipse 34% 46% at 58% 36%,#000 0%,#000 28%,rgba(0,0,0,.45) 62%,transparent 100%);mask-image:radial-gradient(ellipse 34% 46% at 58% 36%,#000 0%,#000 28%,rgba(0,0,0,.45) 62%,transparent 100%);}
  .kht-hero-photo__focus{filter:brightness(.87) saturate(1.05);-webkit-mask-image:radial-gradient(ellipse 17% 24% at 57% 33%,#000 0%,#000 42%,transparent 100%);mask-image:radial-gradient(ellipse 17% 24% at 57% 33%,#000 0%,#000 42%,transparent 100%);}
  .kht-home-hero::after{content:"";position:absolute;inset:0 0 auto 0;height:100svh;z-index:-1;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 38%,transparent 80%);mask-image:linear-gradient(180deg,#000 0,#000 38%,transparent 80%);background:linear-gradient(90deg,rgba(8,20,13,.92) 0%,rgba(8,20,13,.66) 24%,rgba(8,20,13,.28) 42%,rgba(8,20,13,0) 52%),radial-gradient(ellipse 46% 80% at 22% 30%,rgba(6,16,10,.5) 0%,rgba(6,16,10,.28) 45%,rgba(6,16,10,0) 78%),linear-gradient(180deg,rgba(8,20,13,.18) 0%,transparent 16%);pointer-events:none;}
  .kht-home-hero__inner{position:relative;z-index:1;}
  .kht-home-hero__cta-row{max-width:680px;}
  .kht-search{max-width:680px;}
  /* Scroll hint: one thin arrow, no label, no animation, centred at the bottom of the first screen. */
  .kht-hero-scroll{ position:absolute; z-index:2; left:50%; top:calc(100svh - 64px); width:44px; height:44px; margin-left:-22px; display:flex; align-items:center; justify-content:center; color:rgba(247,245,239,.5); text-decoration:none; transition:color 160ms ease; }
  .kht-hero-scroll svg{ width:22px; height:22px; }
  .kht-dark .kht-hero-scroll:hover,.kht-dark .kht-hero-scroll:focus-visible{ color:rgba(247,245,239,.9); }
  .kht-dark .kht-hero-scroll:focus-visible{ outline:2px solid rgba(247,245,239,.8); outline-offset:2px; }
  /* Phone (up to 800px): no photo, the hero keeps the plain STUDIOTOOLS background. */
  @media(max-width:800px){
    .kht-hero-photo,.kht-home-hero::after{ display:none; }
  }
  /* Portrait tablet: text on top, the plywood edge peeks in from the lower right; overlay runs top-down instead of left-right. */
  @media(min-width:801px) and (max-aspect-ratio:1/1){
    .kht-hero-photo__stage{left:calc((100cqw - max(100cqw,165cqh - 115.5px)) * .46);transform:translate(0,56cqh) scale(1.05);}
    /* The plain photo starts at 56% of the hero height; fade its top edge so no hard line shows. */
    .kht-hero-photo{ -webkit-mask-image:linear-gradient(180deg,transparent 54%,#000 70%,#000 90%,transparent 100%); mask-image:linear-gradient(180deg,transparent 54%,#000 70%,#000 90%,transparent 100%); }
    .kht-home-hero::after{background:linear-gradient(180deg,rgba(8,20,13,.92) 0%,rgba(8,20,13,.68) 55%,rgba(8,20,13,.12) 82%,rgba(8,20,13,0) 100%);}
  }

  /* ---- Area hero (same components as the home hero); shared by the area test pages ---- */
  /* Atmosphere that works without a photo: a diagonal beam and a soft glow in the area colour, inside the photo layer so the
     same fades apply. Once explore-hero.jpg exists the photo layers sit on top of it. */
  /* The motif is a 16:9 picture. Its subject (at --photo-u of the picture width) is kept at --photo-x of the hero width
     at every window shape, so it never runs into the title; the picture always covers the hero and is centred vertically.
     Dark on the text side, fading out at the bottom of the first screen. */
  .kht-x-photo{ --h:calc(max(100cqh,56.27cqw) * var(--photo-scale,1)); --w:calc(1.7768 * var(--h)); position:absolute; height:var(--h); width:var(--w);
    top:var(--photo-top,calc((100cqh - var(--h)) / 2));
    left:var(--photo-left,clamp(calc(100cqw - var(--w)),calc(var(--photo-x,46cqw) - var(--photo-u,.4485) * var(--w)),var(--photo-max,0px)));
    background-size:100% 100%; background-repeat:no-repeat; filter:var(--photo-filter,none);
    /* optional: level the picture. --photo-rotate turns it, --photo-zoom keeps the corners covered (about 1 + 0.04 per degree). */
    transform:rotate(var(--photo-rotate,0deg)) scale(var(--photo-zoom,1)); transform-origin:var(--photo-origin,50% 50%); }
  .kht-hero-photo{ -webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%); }
  .kht-home-hero::after{ background:linear-gradient(90deg,rgba(8,20,13,.74) 0%,rgba(8,20,13,.48) 24%,rgba(8,20,13,.1) 44%,rgba(8,20,13,0) 56%),linear-gradient(270deg,rgba(8,20,13,.55) 0%,rgba(8,20,13,.3) 9%,rgba(8,20,13,0) 24%),linear-gradient(180deg,rgba(8,20,13,.22) 0%,transparent 16%); -webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%); }
  /* One screen high; the status row sits at its lower edge (mockup). */
  .kht-home-hero{ min-height:100svh; display:flex; flex-direction:column; padding-bottom:clamp(36px,4.6vw,64px); }
  .kht-home-hero__inner{ flex:1; width:100%; display:flex; flex-direction:column; }
  .kht-home-hero__cover{ min-height:0; flex:1; }
  .kht-home-hero .kht-hero__stats{ margin-top:0; }
  .kht-dark .kht-x-more{ color:#e8ece2; }
  .kht-x-more{ display:inline-flex; align-items:center; gap:14px; margin-top:clamp(26px,3vw,44px); font-family:var(--font-mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#e8ece2; text-decoration:none; }
  .kht-x-more::after{ content:""; width:32px; height:1px; background:currentColor; transition:width 160ms ease; }
  .kht-dark .kht-x-more:hover,.kht-dark .kht-x-more:focus-visible{ color:var(--accent-bright); }
  .kht-x-more:hover::after,.kht-x-more:focus-visible::after{ width:48px; }
  .kht-home-hero h1.kht-x-title{ font-size:clamp(88px,10.6vw,176px); line-height:.84; margin-left:0 !important; }
  .kht-home-hero h1.kht-x-title .kht-slash--hero{ height:.735em; }
  /* Subtitle: thin, tall, condensed (Antonio ExtraLight, OFL) as in the mockups. */
  .kht-x-sub{ margin:clamp(6px,.8vw,12px) 0 0; font-family:"Antonio","Arial Narrow",sans-serif; font-size:clamp(48px,5.4vw,88px); font-weight:200; line-height:1; letter-spacing:.005em; color:rgba(240,238,232,.84); }
  .kht-home-hero__eyebrow{ color:#aab3a4; }
  .kht-home-hero .kht-home-hero__cta-row{ margin-top:clamp(20px,2.4vw,36px); }
  .kht-x-intro{ padding:clamp(56px,7vw,104px) clamp(20px,5vw,72px) clamp(36px,4vw,56px); }
  .kht-x-intro .kht-hero__lead--wide{ margin-top:0; }
  /* ---- Below the hero: finer and smaller type (question, lead, status row, tiles) ---- */
  .kht-x-intro .kht-hero__question{ margin:0 0 clamp(14px,1.6vw,22px); font-size:clamp(20px,2.1vw,30px); font-weight:300; letter-spacing:-.01em; line-height:1.2; color:rgba(240,238,232,.88); }
  .kht-x-intro .kht-hero__lead,.kht-x-intro .kht-hero__lead--wide{ font-size:15px; font-weight:300; line-height:1.68; color:rgba(215,220,208,.72); }
  .kht-x-intro .kht-hero__stats{ font-size:10.5px; letter-spacing:.18em; color:rgba(247,245,239,.5); }
  .kht-dark .kht-tile__kicker{ font-size:9.5px; letter-spacing:.2em; color:rgba(247,245,239,.5); }
  .kht-dark .kht-tile__desc{ font-size:13.5px; font-weight:300; line-height:1.62; color:rgba(215,220,208,.7); }
  .kht-dark .kht-tile__tags{ font-size:9.5px; letter-spacing:.16em; color:rgba(247,245,239,.42); }

  /* Spot lighting: a second, brighter copy of the picture that is only visible inside a soft light cone around the subject
     (mask in picture coordinates), and a light beam in the area colour on top. Everything else stays dark. */
  .kht-x-photo.kht-x-photo--spot{ filter:var(--spot-filter,none);
    -webkit-mask-image:radial-gradient(ellipse var(--spot-rx,30%) var(--spot-ry,38%) at var(--spot-cx,60%) var(--spot-cy,45%),#000 0%,#000 26%,rgba(0,0,0,.55) 58%,transparent 100%);
    mask-image:radial-gradient(ellipse var(--spot-rx,30%) var(--spot-ry,38%) at var(--spot-cx,60%) var(--spot-cy,45%),#000 0%,#000 26%,rgba(0,0,0,.55) 58%,transparent 100%); }
  /* Text over the picture: slightly brighter, with a soft dark halo so it stays legible over lit parts of a motif. */
  .kht-home-hero .kht-home-hero__cta-row p{ color:#d3d9cc; text-shadow:0 1px 16px rgba(0,0,0,.6),0 0 3px rgba(0,0,0,.35); }
  .kht-home-hero .kht-home-hero__eyebrow,.kht-home-hero .kht-x-more{ text-shadow:0 1px 12px rgba(0,0,0,.6); }
  .kht-home-hero .kht-x-sub{ text-shadow:0 2px 20px rgba(0,0,0,.45); }
  /* Calm text side: a blurred, dimmed layer over the left part of the picture (backdrop blur, faded out to the right), so text over busy motifs stays legible. */
  .kht-hero-photo--soft::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    -webkit-backdrop-filter:blur(var(--soft-blur,14px)) brightness(var(--soft-dim,.6)); backdrop-filter:blur(var(--soft-blur,14px)) brightness(var(--soft-dim,.6));
    -webkit-mask-image:radial-gradient(ellipse var(--soft-rx,34%) var(--soft-ry,62%) at var(--soft-cx,9%) var(--soft-cy,40%),#000 0,#000 42%,rgba(0,0,0,.5) 70%,transparent 100%);
    mask-image:radial-gradient(ellipse var(--soft-rx,34%) var(--soft-ry,62%) at var(--soft-cx,9%) var(--soft-cy,40%),#000 0,#000 42%,rgba(0,0,0,.5) 70%,transparent 100%); }
  @media(max-aspect-ratio:13/10){ .kht-hero-photo--soft{ --soft-rx:56%; --soft-cx:12%; --soft-cy:34%; --soft-ry:52%; } }
  .kht-hero-photo::after{ content:""; position:absolute; inset:0; mix-blend-mode:screen; pointer-events:none;
    background:linear-gradient(var(--beam-angle,112deg),transparent var(--beam-a,40%),color-mix(in srgb,var(--accent) var(--beam-i,0%),transparent) var(--beam-b,50%),color-mix(in srgb,var(--accent) calc(var(--beam-i,0%) * .4),transparent) var(--beam-c,58%),transparent var(--beam-d,70%)); }