/* ============================================================
   Kim Trần Import Export — component CSS for Kadence Blocks.
   Enqueued AFTER kt-tokens.css. Every rule is scoped to a kt- class
   added in the block's "Advanced → Additional CSS Class(es)" field
   (or, for §7, inside the isolated Custom HTML component). Nothing
   here targets Kadence's own generated classes, so a Kadence update
   cannot break it.

   Base (desktop-first) rules only. Breakpoint overrides live in
   kt-responsive.css, which loads after this file. Reveal-on-scroll
   animation and prefers-reduced-motion handling live in kt-motion.css.
   ============================================================ */

/* ---------- reset (Phase 7, front page only) ---------------
   Found during Phase 7 browser QA: the front page no longer enqueues
   Kadence's parent stylesheet (see functions.php), which used to supply
   basic normalization for free. Without it: form inputs used
   width:100% + padding with the browser's default content-box sizing
   (padding added ON TOP of 100% width — real overflow risk), the page
   carried the UA stylesheet's 8px body margin, and nav/footer links
   showed default underlines that individual component rules didn't all
   override. This is the minimal reset needed for kt-components.css to
   be self-sufficient on a bare Kadence child theme with no other CSS
   loaded — every other page on the site still gets Kadence's own,
   more complete reset as before. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}

/* ---------- 0. structure + shared primitives --------------
   Phase 6 note: .kt-container now carries its OWN horizontal padding
   and .kt-section carries ONLY vertical padding, so the two compose
   correctly whether used together (<section class="kt-section"><div
   class="kt-container">, e.g. about/journey/timber-grid/technical/
   enquiry) or alone (<section class="kt-hero-section"><div
   class="kt-container">, which needs its own horizontal inset but a
   different, section-specific vertical rhythm — see §2 hero). In
   Phase 1-5 these two classes were optional/unused utilities (Kadence
   Row Layout supplied real padding natively), so redefining them here
   changes no existing behaviour. */
.kt-page{background:var(--kt-surface-page)}
.kt-section{padding-top:var(--kt-section-y);padding-bottom:var(--kt-section-y)}
.kt-section--alt{background:var(--kt-surface-alt)}
/* Phase 7: sections mostly separate via whitespace + this hairline now,
   not colour banding — .kt-section--alt is reserved for Journey only.
   See kt-tokens.css §"semantic" for the page-background reasoning. */
.kt-section--divided{border-top:1px solid var(--kt-border-hairline)}
.kt-container{max-width:var(--kt-container);margin:0 auto;padding-left:var(--kt-pad);padding-right:var(--kt-pad)}

/* Standard sr-only pattern: content stays in the DOM and in tab order,
   removed only from the visual canvas. Used for the honeypot label,
   the values-strip's visually hidden <h2>, and the species name
   suffix on the two timber-card CTA buttons. */
.kt-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.kt-kicker{font-family:var(--kt-font-mono);font-size:var(--kt-fs-kicker);font-weight:500;letter-spacing:var(--kt-ls-kicker);text-transform:uppercase;color:var(--kt-text-heading)}
.kt-kicker--dim{color:var(--kt-text-on-dark-muted)}
/* Phase 7: retired the star-icon + tick-rule "§ 0x" index treatment —
   called out as feeling artificial. .kt-index is now just a small,
   quiet numeral label (still available where a light numeral accent
   earns its place, e.g. capabilities — see values.php). */
.kt-index{display:block;font-family:var(--kt-font-sans);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--kt-text-muted);margin-bottom:10px}
.kt-section-header{margin-bottom:var(--kt-sp-10)}
.kt-section-header h2{font-size:var(--kt-fs-h2);line-height:var(--kt-lh-h2);letter-spacing:var(--kt-ls-h2);font-weight:800;color:var(--kt-text-heading);margin:0}
.kt-section-header__sub{font-family:var(--kt-font-mono);font-size:var(--kt-fs-kicker);letter-spacing:.16em;text-transform:uppercase;color:var(--kt-text-muted);margin-top:var(--kt-sp-2)}
.kt-section-header__lead{margin-top:var(--kt-sp-5);font-size:var(--kt-fs-lead);line-height:var(--kt-lh-lead);max-width:58ch;color:var(--kt-text-body)}
.kt-mono{font-family:var(--kt-font-mono);font-size:var(--kt-fs-code);letter-spacing:.04em}
.kt-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--kt-font-mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:var(--kt-radius-xs);border:1px solid var(--kt-border-hairline);color:var(--kt-text-muted);white-space:nowrap}
.kt-badge--accent{color:var(--kt-gold);border-color:rgba(199,160,76,.55)}
.kt-badge--solid{color:var(--kt-cream);border-color:transparent;background:var(--kt-green-700)}
.kt-badge--verify{color:#B23A48;border:1px dashed rgba(178,58,72,.55);background:rgba(178,58,72,.06)}
.kt-note{display:flex;gap:var(--kt-sp-2);font-size:var(--kt-fs-caption);line-height:var(--kt-lh-caption);color:var(--kt-text-muted)}
.kt-note::before{content:"";flex:none;width:14px;height:14px;margin-top:3px;border-radius:var(--kt-radius-xs);background:var(--kt-gold)}
.kt-stamp{border-radius:var(--kt-radius-md);clip-path:polygon(var(--kt-notch) 0,100% 0,100% 100%,0 100%,0 var(--kt-notch))}
:where(.kt-scope) :focus-visible{outline:2px solid var(--kt-gold);outline-offset:2px}

/* ---------- 1. header -------------------------------------
   Phase 6: header-kimtran.php is hand-authored HTML (no Kadence header
   builder underneath on the front page), so — unlike Phase 1-5, where
   Kadence's builder supplied the row layout — this file now also owns
   the header's actual flex layout, not just its colour/type skin. */
/* Phase 7: translucency now keys off --kt-paper (251,248,242) — the
   new page background — instead of the old, stronger --kt-cream
   (242,236,224), so the sticky header reads as an extension of the
   page rather than a distinct beige bar. Row height trimmed slightly
   (12px, was 14px) per "cleaner, slightly more compact" header. */
.kt-header{background:rgba(251,248,242,.92);-webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--kt-border-hairline);position:sticky;top:0;z-index:40}
.kt-header__inner{display:flex;align-items:center;gap:var(--kt-sp-8);padding-top:12px;padding-bottom:12px}
.kt-header__logo{display:block;flex:none;line-height:0;border-bottom:none}
.kt-header__logo img{
    display:block;
    width:270px !important;
    height:auto !important;
    max-width:none !important;
}
.kt-nav{display:flex;flex-wrap:wrap;gap:var(--kt-sp-6);margin-left:auto}
/* Commercial, not blog-like: Inter, sentence case, no tracking —
   replaces the Phase 1-5 mono/uppercase/tracked nav treatment. */
.kt-header .kt-nav a{font-family:var(--kt-font-sans);font-size:14.5px;font-weight:500;color:var(--kt-text-body);border-bottom:1.5px solid transparent;padding-bottom:3px;transition:color var(--kt-dur) var(--kt-ease),border-color var(--kt-dur) var(--kt-ease)}
.kt-header .kt-nav a:hover,.kt-header .kt-nav .current-menu-item>a{color:var(--kt-green-700);border-bottom-color:var(--kt-gold)}
.kt-header .kt-nav a:focus-visible{outline:2px solid var(--kt-gold);outline-offset:2px}
.kt-header__cta{flex:none;margin-left:var(--kt-sp-3)}
/* .kt-header prefix bumps specificity above plain .kt-btn{display:...}
   (found in Phase 7 browser QA: both share equal specificity, and
   .kt-btn's own display:inline-flex — declared later in this same
   file, in the buttons section — was winning the tie, showing both
   CTAs at once outside the mobile breakpoint). */
.kt-header .kt-header__cta--short{display:none}
.kt-header__toggle{display:none;flex:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:4px;background:transparent;border:1.5px solid var(--kt-border-hairline);border-radius:var(--kt-radius-sm);cursor:pointer;margin-left:var(--kt-sp-3)}
.kt-header__toggle span{display:block;width:18px;height:1.5px;background:var(--kt-green-700);transition:transform var(--kt-dur) var(--kt-ease),opacity var(--kt-dur) var(--kt-ease)}
.kt-header__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.kt-header__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.kt-header__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.kt-skip-link{position:absolute;left:-9999px;top:auto;z-index:100;background:var(--kt-green-700);color:var(--kt-cream);padding:12px 20px;border-radius:var(--kt-radius-sm)}
.kt-skip-link:focus{left:var(--kt-sp-4);top:var(--kt-sp-4)}

/* ---------- 2. hero --------------------------------------
   Phase 7: asymmetric ~58/42 split (was ~52/48), larger scale, and the
   image is framed like a mounted material sample — a bordered mat
   around the photo plus a small label strip below, rather than a
   full-bleed generic photo card. Capabilities ("values") detached into
   its own section — see front-page.php — so .kt-values-band is gone. */
.kt-hero-section{padding-top:88px}
.kt-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:72px;align-items:center;padding-bottom:80px}
/* Spacing QA: H1→lead tightened (they're one continuous thought);
   lead→actions kept more open (margin-top on .kt-hero__actions, on top
   of the grid gap) so the CTAs read as a distinct next step. */
.kt-hero__content{display:grid;gap:18px}
.kt-hero__actions{display:flex;gap:28px;align-items:center;margin-top:14px}
.kt-hero__title{font-size:var(--kt-fs-display);line-height:1.05;letter-spacing:var(--kt-ls-display);font-weight:800;color:var(--kt-text-heading);text-wrap:balance;margin:0;max-width:15ch}
/* Readability QA: hero lead moved from muted/slate to the standard body
   ink — this is primary hero copy, not secondary/de-emphasized text. */
.kt-hero__lead{font-size:var(--kt-fs-lead);line-height:1.55;max-width:48ch;text-wrap:pretty;margin:0;color:var(--kt-text-body)}
.kt-hero__visual{margin:0;display:grid;gap:0;max-width:360px}
.kt-hero__frame{background:var(--kt-cream-warm);border:1px solid var(--kt-border-hairline);border-radius:var(--kt-radius-lg);padding:14px}
.kt-figcaption{font-family:var(--kt-font-sans);font-size:12.5px;letter-spacing:0;color:var(--kt-text-muted);margin-top:12px;padding-top:12px;border-top:1px solid var(--kt-border-hairline)}
.kt-media--4x3 img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:var(--kt-radius-sm);display:block}

/* ---------- 3. capabilities (formerly "value tile") ------
   Phase 7: replaced the 4 equal cards with a single flex row of
   naturally-sized items separated by hairline dividers — asymmetric by
   construction (no forced equal column widths) rather than a grid. */
/* Spacing QA: a touch more room between capability items — padding-left
   bumped 24px → 32px, small row-gap added for when items wrap. */
.kt-values{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--kt-sp-4) 0}
.kt-value{flex:1 1 240px;padding:0 var(--kt-sp-8) 0 0;border-left:1px solid var(--kt-border-hairline);padding-left:var(--kt-sp-8)}
.kt-value:first-child{border-left:none;padding-left:0}
.kt-value__index{font-family:var(--kt-font-sans);font-size:13px;font-weight:600;color:var(--kt-text-muted);display:block;margin-bottom:var(--kt-sp-3)}
.kt-value h4{font-size:18px;font-weight:700;color:var(--kt-text-heading);margin:0 0 var(--kt-sp-2);letter-spacing:-.01em}
.kt-value p{font-size:var(--kt-fs-body-sm);line-height:1.6;color:var(--kt-text-body);margin:0}

/* ---------- 4. company / working approach -----------------
   Phase 7: one asymmetric 2-column layout (was 3 equal boxed pillars +
   a separate statement block below). Left = the brand book's own
   positioning line, now doing double duty as the section's single
   strong introductory statement. Right = mission/vision/about-us
   stacked as label+paragraph pairs, not three equal boxes. */
/* .kt-about's two direct children (.kt-about__lead, .kt-about__supporting)
   are the grid items — .kt-about__lead itself is an intentionally bare
   wrapper (same pattern as .kt-tech-wrap): all its visual weight comes
   from .kt-about__statement inside it. */
.kt-about{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.kt-about__statement{font-size:30px;font-weight:700;letter-spacing:-.015em;line-height:1.28;color:var(--kt-text-heading);margin:0}
.kt-about__statement em{color:var(--kt-gold);font-style:normal}
.kt-about__supporting{display:grid;gap:var(--kt-sp-8)}
.kt-pillar{border-top:1px solid var(--kt-border-hairline);padding-top:18px}
.kt-pillar__kicker{font-family:var(--kt-font-sans);font-size:13px;font-weight:600;color:var(--kt-text-muted);margin-bottom:10px}
.kt-pillar p{font-size:var(--kt-fs-body-sm);line-height:1.7;margin:0;color:var(--kt-text-body)}

/* ---------- 5. journey -----------------------------------
   Phase 7: restrained numbering — a plain small numeral above the
   title, not a filled green pill — and the dashed tick-rule connector
   between steps is gone; whitespace + the numeral sequence carry the
   "steps" idea on their own now ("reduce the boxed appearance" /
   "restrained numbering" from the redesign brief). */
.kt-journey{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.kt-journey__num{display:block;font-family:var(--kt-font-sans);font-size:13px;font-weight:600;color:var(--kt-text-muted);margin-bottom:var(--kt-sp-3)}
.kt-journey__step h3,.kt-journey__step h4{font-size:19px;font-weight:700;color:var(--kt-text-heading);margin:0}
.kt-journey__step img{border-radius:var(--kt-radius-sm);width:100%;display:block;margin:var(--kt-sp-4) 0 0}
.kt-journey__step p{font-size:var(--kt-fs-body-sm);line-height:1.65;color:var(--kt-text-muted);margin:var(--kt-sp-4) 0 0}
/* the mobile "gold rail" (task brief's example class kt-journey__rail) is
   drawn as .kt-journey__step::before — see kt-responsive.css — rather than
   a extra DOM element, since it is pure decoration, not layout. On the
   rail, the numeral switches to green so it stays legible against it. */

/* ---------- 6. timber products -----------------------------
   Phase 7: complete redesign — one featured card (full-width,
   horizontal, larger) + four compact cards (4-up row, short) instead
   of 5 equally-heavy vertical cards. Every card shows only name,
   scientific name, verified distribution, one characteristic and a
   single CTA — see timber-grid.php. Compact cards deliberately stay
   short (small image + 2 fields + a text-link CTA, no boxed button)
   so the row never reads as "5 tall repeated cards." */
/* Spacing QA: align-items:stretch (was start) so the 4 compact cards in
   a row match height even when their text content lengths differ —
   each card's own flex-column body then distributes that height, and
   the CTA link (margin-top:auto, below) pins to the bottom either way. */
.kt-timber-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--kt-sp-6);align-items:stretch}
.kt-timber-card{display:flex;flex-direction:column;background:var(--kt-surface-card);border:var(--kt-hair) solid var(--kt-border-hairline);border-radius:var(--kt-radius-lg);overflow:hidden;box-shadow:var(--kt-shadow-card);transition:box-shadow var(--kt-dur) var(--kt-ease),border-color var(--kt-dur) var(--kt-ease)}
.kt-timber-card:hover,.kt-timber-card:focus-within{box-shadow:var(--kt-shadow-raised);border-color:rgba(11,95,53,.35)}
.kt-timber-card__media{background:var(--kt-surface-alt);overflow:hidden}
.kt-timber-card__media img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block;transition:transform var(--kt-dur-slow) var(--kt-ease)}
.kt-timber-card:hover .kt-timber-card__media img{transform:scale(1.02)}
.kt-timber-card__body{padding:var(--kt-sp-5);display:flex;flex-direction:column;gap:var(--kt-sp-3)}
.kt-timber-card h3{font-size:19px;font-weight:700;letter-spacing:-.005em;color:var(--kt-text-heading);margin:0}
.kt-timber-card__sci{font-family:var(--kt-font-mono);font-size:11.5px;font-style:italic;color:var(--kt-text-body);margin:0}
.kt-timber-card__fields{display:grid;gap:6px;margin:var(--kt-sp-2) 0 0}
.kt-timber-card__field{display:flex;gap:6px;font-size:13px;line-height:1.5}
.kt-timber-card__field dt{font-weight:600;color:var(--kt-text-body);margin:0}
.kt-timber-card__field dt::after{content:":"}
.kt-timber-card__field dd{margin:0;color:var(--kt-text-body)}
.kt-timber-card .kt-btn{margin-top:auto;align-self:flex-start}

/* the featured card: full row width, horizontal (image | content) */
.kt-timber-card--featured{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.2fr}
.kt-timber-card--featured .kt-timber-card__media{
    align-self:start;
    width:100%;
    aspect-ratio:1 / 1;
}

.kt-timber-card--featured .kt-timber-card__media img{
    width:100%;
    height:100%;
    min-height:0;
    aspect-ratio:auto;
    object-fit:cover;
}
.kt-timber-card--featured .kt-timber-card__body{padding:var(--kt-sp-8);gap:var(--kt-sp-3);justify-content:center}
.kt-timber-card--featured .kt-timber-card__tag{font-size:13px;font-weight:600;color:var(--kt-gold);margin-bottom:var(--kt-sp-2)}
.kt-timber-card--featured h3{font-size:30px}
.kt-timber-card--featured .kt-timber-card__sci{font-size:13px}
.kt-timber-card--featured .kt-timber-card__fields{display:flex;gap:var(--kt-sp-6);margin-top:var(--kt-sp-4)}
.kt-timber-card--featured .kt-btn{margin-top:var(--kt-sp-5)}

/* ---------- 6b/7. spec key–value rows -------------------- */
.kt-spec{display:grid;margin:0}
.kt-spec__caption{font-family:var(--kt-font-mono);font-size:var(--kt-fs-label);letter-spacing:var(--kt-ls-label);text-transform:uppercase;color:var(--kt-text-heading);margin-bottom:var(--kt-sp-3)}
/* Spacing QA: a touch more row padding for readability (13px → 16px). */
.kt-spec__row{display:grid;grid-template-columns:52% 1fr;gap:var(--kt-sp-4);align-items:baseline;padding:16px 0;border-top:1px solid var(--kt-border-hairline);margin:0}
/* Readability QA: spec-row labels darkened from muted/slate; values get
   an explicit ink colour instead of relying on inherited default. */
.kt-spec__row dt{font-family:var(--kt-font-mono);font-size:var(--kt-fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--kt-text-body);margin:0}
.kt-spec__row dd{margin:0;font-size:var(--kt-fs-body-sm);font-weight:600;line-height:1.5;color:var(--kt-text-body)}

/* ---------- 7. technical profile -------------------------
   Phase 7: kept fully functional/unchanged in structure (task brief:
   "keep the existing functional PHP component and species switching");
   refined entry (no more cream section band — see front-page.php — and
   no § index above it, closer whitespace to the timber grid above),
   spacing, typography (Inter) and the switcher's selected-state, below.
   Head-kicker softened from mono-tracked-uppercase to a small Inter
   label — the one remaining "eyebrow"-shaped element, so it got the
   same treatment as the section index it sits next to conceptually. */
.kt-tech{background:var(--kt-surface-card);border:var(--kt-hair) solid var(--kt-border-hairline);border-radius:var(--kt-radius-lg);overflow:hidden}
/* Spacing QA: a little more top padding for a calmer entry into the
   panel (was var(--kt-sp-6)/24px top, now var(--kt-sp-8)/32px). */
.kt-tech__head{background:var(--kt-surface-dark);color:var(--kt-text-on-dark);padding:var(--kt-sp-8) var(--kt-sp-8) var(--kt-sp-6);display:flex;gap:var(--kt-sp-5);align-items:flex-start;flex-wrap:wrap}
.kt-tech__head-kicker{font-family:var(--kt-font-sans);font-size:13px;font-weight:700;color:rgba(242,236,224,.94)!important;margin-bottom:8px}
.kt-tech__head h3{color:var(--kt-text-on-dark);font-size:32px;font-weight:800;letter-spacing:-.015em;line-height:1.05;margin:0}
.kt-tech__head .kt-tech__sci{font-family:var(--kt-font-mono);font-size:12.5px;font-style:italic;color:rgba(242,236,224,.80)!important;margin:6px 0 0}
/* Unused on the live-rendering path as of the commercial-polish pass
   (the image moved into .kt-tech__swatch below) — left in place because
   snippets/technical-profile.html, the dormant Phase 1-5 Kadence
   reference, still uses this class and this rule costs nothing idle. */
.kt-tech__hero img{height:168px;width:100%;object-fit:cover;display:block;border-bottom:var(--kt-hair) solid var(--kt-border-hairline)}
/* Commercial-polish pass: was prose|specs only, with the wood image in
   its own full-width strip above (see .kt-tech__hero above — the
   source image isn't print-resolution, so a full-width strip looked
   soft/stretched). Now three named areas: intro prose left, a
   restrained image swatch upper-right, specs/price/uses preserved
   below spanning both columns. */
.kt-tech__body{padding:var(--kt-sp-8);display:grid;gap:var(--kt-sp-6) var(--kt-sp-8);grid-template-columns:1.15fr 1fr;grid-template-areas:"prose swatch" "specs specs";align-items:start}
.kt-tech__prose{grid-area:prose}
.kt-tech__swatch{grid-area:swatch;justify-self:end;width:100%;max-width:320px}
.kt-tech__swatch img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--kt-radius-md);border:var(--kt-hair) solid var(--kt-border-hairline)}
.kt-tech__specs{grid-area:specs}
.kt-tech__badges{display:flex;flex-wrap:wrap;gap:var(--kt-sp-2);margin-bottom:var(--kt-sp-6)}
.kt-tech__prose-label{font-family:var(--kt-font-mono);font-size:var(--kt-fs-label);letter-spacing:var(--kt-ls-label);text-transform:uppercase;color:var(--kt-text-heading);margin-bottom:var(--kt-sp-5)}
.kt-tech__prose h4{font-size:13.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--kt-text-heading);margin:0 0 6px}
.kt-tech__prose p{font-size:var(--kt-fs-body-sm);line-height:1.7;margin:0 0 var(--kt-sp-5);color:var(--kt-text-body)}
.kt-tech__uses-label{font-family:var(--kt-font-mono);font-size:var(--kt-fs-label);letter-spacing:var(--kt-ls-label);text-transform:uppercase;color:var(--kt-text-heading);margin-bottom:var(--kt-sp-3)}
.kt-tech__uses{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.kt-tech__uses li{position:relative;padding-left:16px;font-size:var(--kt-fs-body-sm);line-height:1.5}
.kt-tech__uses li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:1px;background:var(--kt-gold)}
.kt-tech__price{background:var(--kt-surface-alt);border-radius:var(--kt-radius-md);padding:var(--kt-sp-5);display:grid;gap:var(--kt-sp-3)}
.kt-tech__price-label{font-family:var(--kt-font-mono);font-size:var(--kt-fs-label);letter-spacing:var(--kt-ls-label);text-transform:uppercase;color:var(--kt-text-heading)}
.kt-tech__price-dims{font-family:var(--kt-font-mono);font-size:14px;font-weight:500}
.kt-tech__price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.kt-tech__price-figure{font-size:26px;font-weight:900;letter-spacing:-.02em;color:var(--kt-text-heading)}
.kt-tech__price-note{font-size:var(--kt-fs-caption);color:var(--kt-text-muted);line-height:1.55;margin:0}
.kt-tech__foot{border-top:var(--kt-dash) var(--kt-border-hairline);padding:var(--kt-sp-6) var(--kt-sp-8);display:grid;gap:var(--kt-sp-5)}
/* species switcher (progressive enhancement — see kt-interactions.js).
   Phase 7: underline tabs instead of a filled/outlined button group —
   quieter, more editorial "selected state." Overrides .kt-btn's own
   skin only inside .kt-tech-tabs; kt-interactions.js is untouched — it
   still just toggles .kt-btn--primary/--secondary on click, which is
   exactly what this now keys off. Padding sized to keep a ~44px touch
   target despite the lighter look. */
.kt-tech-tabs{display:flex;flex-wrap:wrap;gap:var(--kt-sp-6);margin-bottom:var(--kt-sp-8);border-bottom:1px solid var(--kt-border-hairline)}
.kt-tech-tabs .kt-btn{background:transparent;border:none;border-radius:0;padding:13px 2px;font-size:15px;font-weight:500;color:var(--kt-text-muted);border-bottom:2px solid transparent}
.kt-tech-tabs .kt-btn--primary{background:transparent;color:var(--kt-text-heading);font-weight:600;border-bottom-color:var(--kt-green-700)}
.kt-tech-tabs .kt-btn--secondary:hover{background:transparent;color:var(--kt-text-heading)}
.kt-tech-tabs .kt-btn:focus-visible{outline:2px solid var(--kt-gold);outline-offset:4px}
.kt-tech-panel[hidden]{display:none}
/* with JS off, all 5 panels render at once (no [hidden]) — give
   consecutive visible panels breathing room instead of running
   together. .kt-tech-wrap itself is an intentionally bare semantic
   wrapper (no visual styling needed beyond this). */
.kt-tech-panel + .kt-tech-panel{margin-top:var(--kt-sp-8)}

/* ---------- 7b. working principles (new, Phase 7) --------
   Clean editorial list with dividers — deliberately not another card
   grid, per the redesign brief. */
.kt-principles{list-style:none;margin:0;padding:0;max-width:64ch}
.kt-principles li{font-size:22px;font-weight:500;letter-spacing:-.005em;line-height:1.4;color:var(--kt-text-heading);padding:var(--kt-sp-6) 0;border-top:1px solid var(--kt-border-hairline)}
.kt-principles li:last-child{border-bottom:1px solid var(--kt-border-hairline)}

/* ---------- 7c. editorial text/image splits (art-direction pass) --
   Replaces the previous pass's .kt-pause* (small centred image in a
   dark/cream band — art-direction feedback: reads as visually weak).
   These sit on the plain page surface, same as their neighbouring
   .kt-section--divided siblings — no colour band of their own — so the
   photo itself is what carries visual weight, not a background colour.
   Two variants only (source-forest and material-study; the third
   image lives inside .kt-principles-split below instead): --forest is
   ~38/62 text/image with the image on the right (natural DOM order,
   no reorder needed); --material is ~48/52 with the image on the left
   (reversed via order, for a zigzag reading rhythm against --forest). */
.kt-editorial{display:grid;gap:var(--kt-sp-10);align-items:center}
.kt-editorial--forest{grid-template-columns:3fr 5fr}
.kt-editorial--material{grid-template-columns:5fr 5.5fr}
.kt-editorial--material .kt-editorial__media{order:-1}
.kt-editorial__text{display:grid;gap:var(--kt-sp-4)}
.kt-editorial__caption{font-family:var(--kt-font-sans);font-size:24px;font-weight:600;line-height:1.45;letter-spacing:-.01em;color:var(--kt-text-heading);margin:0}
.kt-editorial__support{font-family:var(--kt-font-sans);font-size:var(--kt-fs-body-sm);line-height:1.7;color:var(--kt-text-body);margin:0}
.kt-editorial__media{border-radius:var(--kt-radius-lg);overflow:hidden;background:var(--kt-surface-alt)}
.kt-editorial__media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
/* Placeholder SVG art (editorial-split.php's file_exists() fallback)
   — centred, restrained, so a still-pending image never looks like a
   design mistake. */
.kt-editorial__art{width:100%;height:auto;max-width:200px;margin:var(--kt-sp-12) auto;display:block}

/* ---------- 7d. principles + inspection image (art-direction pass) -
   The third editorial image (timber-inspection) no longer gets its
   own standalone section — merged directly into Working principles:
   principles list on one side, image + small caption on the other. */
.kt-principles-split{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--kt-sp-12);align-items:start}
.kt-principles-split__media{display:grid;gap:var(--kt-sp-3)}
.kt-principles-split__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--kt-radius-lg);display:block}
.kt-principles-split__caption{font-family:var(--kt-font-sans);font-size:13px;font-style:italic;color:var(--kt-text-muted);line-height:1.6;margin:0}

/* ---------- 7e. closing section (art-direction pass) --------------
   Promoted out of the enquiry aside (was a 13.5px low-opacity line —
   see FRONT-PAGE-CHANGELOG.md). Sits on the plain page surface between
   the dark Enquiry close and the dark footer — a light "breath" instead
   of stacking a third dark band — centred, text-only, restrained. */
.kt-closing-section{background:var(--kt-surface-page);padding:var(--kt-section-y) 0;text-align:center;border-top:1px solid var(--kt-border-hairline)}
.kt-closing{max-width:640px;margin:0 auto;display:grid;gap:var(--kt-sp-4)}
.kt-closing__headline{font-family:var(--kt-font-sans);font-size:var(--kt-fs-h2);font-weight:800;letter-spacing:var(--kt-ls-h2);line-height:1.2;color:var(--kt-text-heading);margin:0}
.kt-closing__body{font-family:var(--kt-font-sans);font-size:var(--kt-fs-body-sm);line-height:1.7;color:var(--kt-text-body);margin:0}
.kt-closing__cta{display:inline-flex;align-items:center;gap:6px;justify-self:center;margin-top:var(--kt-sp-2);font-family:var(--kt-font-sans);font-weight:600;font-size:15px;color:var(--kt-green-700);border-bottom:1.5px solid var(--kt-gold);padding-bottom:2px;transition:color var(--kt-dur) var(--kt-ease)}
.kt-closing__cta:hover{color:var(--kt-green-900)}

/* ---------- 8. download block -----------------------------
   Phase 7: no longer its own boxed dark panel (it sat next to a light
   form before) — now a plain on-dark content block living directly on
   the Enquiry section's shared green background, so no background/
   padding/radius of its own any more. */
.kt-download{display:grid;gap:var(--kt-sp-4);align-content:start}
.kt-download h3{color:var(--kt-text-on-dark);font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.2;margin:0}
.kt-download p{font-size:var(--kt-fs-body-sm);line-height:1.65;color:rgba(242,236,224,.78);margin:0}

/* ---------- 9. enquiry section + quotation form -----------
   Phase 7: whole section is now a strong forest-green close to the
   page (kt-enquiry-section, background set here), with an asymmetric
   aside (heading + download, on dark) next to a white/warm panel
   holding the form — replaces the old light-section
   form-next-to-a-dark-panel layout. */
.kt-enquiry-section{background:var(--kt-surface-dark);padding:var(--kt-section-y) 0}
.kt-enquiry{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--kt-sp-16);align-items:start}
.kt-enquiry__aside{display:grid;gap:var(--kt-sp-10);align-content:start}
.kt-enquiry__heading{color:var(--kt-text-on-dark);font-size:var(--kt-fs-h2);line-height:1.15;letter-spacing:var(--kt-ls-h2);font-weight:800;margin:0}
.kt-enquiry__sub{font-family:var(--kt-font-sans);font-size:15px;line-height:1.6;color:rgba(242,236,224,.82);margin:var(--kt-sp-3) 0 0}
.kt-enquiry__lead{max-width:34ch;font-family:var(--kt-font-sans);font-size:15px;line-height:1.7;color:rgba(242,236,224,.84);margin:0}
/* Art-direction pass: the .kt-enquiry__closing thank-you line that used
   to live here (mobile-refinement pass) was promoted to its own
   section — see .kt-closing-section below and template-parts/kimtran/
   closing.php — so this rule was removed rather than left orphaned. */
.kt-enquiry__download{border-top:1px solid var(--kt-border-on-dark);padding-top:var(--kt-sp-8)}
.kt-enquiry__panel{background:var(--kt-cream);border-radius:var(--kt-radius-lg);padding:var(--kt-sp-10)}

/* .kt-form itself is the hand-authored <form> element's direct layout;
   .kt-field wraps one label+control pair (see
   inc/kimtran-content.php's kimtran_form_field()). Labels moved from
   mono/uppercase/tracked to a quieter Inter treatment, matching the
   rest of the redesign's UI chrome. */
.kt-form{display:grid;gap:var(--kt-sp-5)}
.kt-field{display:grid;gap:var(--kt-sp-2)}
.kt-form label,.kt-form .kadence-blocks-form-field label{font-family:var(--kt-font-sans);font-size:13.5px;font-weight:600;color:var(--kt-text-heading)}
.kt-form input,.kt-form select,.kt-form textarea{font-family:var(--kt-font-sans);font-size:16px;line-height:1.5;color:var(--kt-text-body);background:var(--kt-paper);border:var(--kt-hair) solid var(--kt-border-hairline);border-radius:var(--kt-radius-sm);padding:13px 14px;min-height:48px;width:100%;transition:border-color var(--kt-dur) var(--kt-ease)}
.kt-form input:focus,.kt-form select:focus,.kt-form textarea:focus{border-color:var(--kt-green-700);outline:2px solid var(--kt-gold);outline-offset:2px}
.kt-form textarea{min-height:104px;resize:vertical}
.kt-form [aria-invalid="true"]{border-color:var(--kt-no)}
.kt-form .kt-required{color:var(--kt-gold)}
.kt-field__error{margin:0;font-size:var(--kt-fs-caption);color:var(--kt-no)}
.kt-form__status{margin:0;padding:var(--kt-sp-3) var(--kt-sp-4);border-radius:var(--kt-radius-sm);font-size:var(--kt-fs-body-sm)}
.kt-form__status--success{background:rgba(11,95,53,.08);color:var(--kt-green-700);border:1px solid rgba(11,95,53,.25)}
.kt-form__status--error{background:rgba(178,58,72,.08);color:var(--kt-no);border:1px solid rgba(178,58,72,.3)}
.kt-form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--kt-sp-5)}
.kt-form__actions{display:flex;flex-wrap:wrap;gap:var(--kt-sp-4);align-items:center;margin-top:var(--kt-sp-5)}

/* ---------- 10. footer ----------------------------------
   Phase 6: footer-kimtran.php is hand-authored, so — same situation as
   §1/§2 above — this file now also owns the footer's grid layout.
   Visual QA patch: background darkened one step past the Enquiry
   section's green (--kt-green-900 vs --kt-surface-dark/--kt-green-700)
   plus a subtle top hairline, so the two dark sections read as
   separate zones instead of running together; vertical padding and
   internal gap both cut significantly; identity/contacts split flipped
   to ~55/45 (was ~45/55). */
.kt-footer{background:var(--kt-green-900);color:var(--kt-text-on-dark);border-top:1px solid var(--kt-border-on-dark);font-family:var(--kt-font-sans)}
.kt-footer a{color:var(--kt-cream);border-bottom:none;text-decoration:none}
.kt-footer a:hover{color:var(--kt-cream)}
.kt-footer a:focus-visible{outline:2px solid var(--kt-gold);outline-offset:2px}
.kt-footer__inner{padding-top:32px;padding-bottom:22px;display:grid;gap:24px}
.kt-footer__top{display:grid;grid-template-columns:1.2fr .8fr;gap:48px}
.kt-footer__identity{display:grid;gap:16px;align-content:start}
.kt-footer__logo{display:block;width:180px !important;height:auto !important;max-width:none !important;object-fit:contain;}
.kt-footer__legal-name{font-family:var(--kt-font-sans);font-size:15px;font-weight:600;color:var(--kt-cream);margin:0}
.kt-footer__legal-name-en{font-family:var(--kt-font-sans);font-size:13px;font-weight:400;letter-spacing:.02em;color:rgba(242,236,224,.68);margin:4px 0 0}
.kt-footer__address{display:grid;gap:6px;font-family:var(--kt-font-sans);font-size:var(--kt-fs-body-sm);font-weight:400;color:rgba(242,236,224,.9)}
.kt-footer__address p{margin:0}
.kt-footer__meta{font-family:var(--kt-font-sans);font-size:12.5px;font-weight:400;letter-spacing:.02em;color:rgba(242,236,224,.58);margin-top:6px!important}
.kt-footer__shared-email{margin:6px 0 0;font-family:var(--kt-font-sans);font-size:13px;font-weight:500}
.kt-footer__shared-email a{color:var(--kt-cream);border-bottom:none}
.kt-footer__shared-email a:hover{border-bottom:1px solid rgba(199,160,76,.7)}
.kt-footer__contacts-wrap{display:grid;gap:20px;align-content:start}
.kt-footer__contacts{display:grid;grid-template-columns:1fr 1fr;gap:var(--kt-sp-6) var(--kt-sp-8)}
.kt-contact{border-top:1px solid var(--kt-border-on-dark);padding-top:var(--kt-sp-3);display:grid;gap:3px;font-family:var(--kt-font-sans);font-style:normal}
.kt-contact__name{font-family:var(--kt-font-sans);font-size:15px;font-weight:600;font-style:normal!important;color:rgba(242,236,224,.98)!important;margin:0}
.kt-contact__role{font-family:var(--kt-font-sans);font-size:13px;font-weight:400;font-style:normal!important;color:rgba(242,236,224,.82)!important;margin:3px 0 0}
.kt-contact__mono{font-family:var(--kt-font-sans);font-size:13px;font-weight:500;font-style:normal!important;letter-spacing:0;color:rgba(242,236,224,.96)!important;margin:6px 0 0}
.kt-contact__mono a{color:rgba(242,236,224,.96)!important;border-bottom:none}
.kt-contact__mono a:hover{border-bottom:1px solid rgba(199,160,76,.7)}
.kt-footer__legal{border-top:var(--kt-dash) rgba(242,236,224,.28);padding-top:18px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
.kt-footer__legal p{font-family:var(--kt-font-sans);font-size:11px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:rgba(242,236,224,.56);margin:0}

/* ---------- buttons ---------------------------------------
   Dual use: (a) added as an Advanced CSS Class on a Kadence Advanced
   Button block, where it mainly supplies colour/skin — any padding or
   font-size the editor sets in the block UI (higher-specificity inline
   style) still wins; (b) used directly on the raw <a> switcher/CTA
   elements inside the isolated technical-profile Custom HTML component
   (§7), where no Kadence block exists underneath, so this class must
   be fully self-sufficient there too. Both cases work with one rule
   set because Kadence's own per-block styling only ever narrows what
   this class supplies, never conflicts with it. */
.kt-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--kt-font-sans);font-weight:700;line-height:1.2;letter-spacing:-.005em;text-decoration:none;cursor:pointer;padding:13px 22px;font-size:14.5px;border-radius:var(--kt-radius-sm);transition:background var(--kt-dur) var(--kt-ease),color var(--kt-dur) var(--kt-ease),border-color var(--kt-dur) var(--kt-ease),transform var(--kt-dur-fast) var(--kt-ease)}
.kt-btn:active{transform:scale(var(--kt-press))}
.kt-btn--sm{padding:9px 16px;font-size:13px}
.kt-btn--lg{padding:17px 30px;font-size:16px}
.kt-btn:focus-visible{outline:2px solid var(--kt-gold);outline-offset:2px}
.kt-btn--primary{background:var(--kt-green-700);color:var(--kt-cream);border:var(--kt-hair) solid transparent}
.kt-btn--primary:hover{background:var(--kt-green-900);color:var(--kt-cream)}
.kt-btn--secondary{background:transparent;color:var(--kt-green-700);border:var(--kt-hair) solid var(--kt-green-700)}
.kt-btn--secondary:hover{background:rgba(11,95,53,.07)}
.kt-btn--on-dark.kt-btn--primary{background:var(--kt-cream);color:var(--kt-green-700)}
.kt-btn--on-dark.kt-btn--primary:hover{background:var(--kt-cream-deep)}
.kt-btn--on-dark.kt-btn--secondary{color:var(--kt-cream);border-color:rgba(242,236,224,.45)}
.kt-btn--on-dark.kt-btn--secondary:hover{background:rgba(242,236,224,.1)}
/* Phase 7: text-link CTA — used on the 4 compact timber cards instead
   of a repeated boxed button 5 times over, and anywhere else a quieter
   call-to-action reads better than a filled/outlined button. */
.kt-btn--ghost{padding:0;background:transparent;border:none;border-radius:0;color:var(--kt-green-700);font-weight:600}
.kt-btn--ghost::after{content:"→";font-family:var(--kt-font-sans);transition:transform var(--kt-dur) var(--kt-ease)}
.kt-btn--ghost:hover{background:transparent;color:var(--kt-green-900)}
.kt-btn--ghost:hover::after{transform:translateX(3px)}
.kt-btn--ghost:active{transform:none}
.kt-btn[aria-disabled="true"],.kt-btn:disabled,.kt-btn[disabled]{opacity:.42;cursor:not-allowed;pointer-events:none}

/* Final QA: keep same-page anchor targets clear of the sticky header. */
#gioi-thieu,#nguon-goc,#hanh-trinh,#dong-go,#chat-lieu,#ho-so-ky-thuat,#nguyen-tac,#bao-gia{scroll-margin-top:92px}