/* =====================================================================
   Kreatronic brand system for the Elementor build.
   Apply these as CSS Classes (Advanced tab) on any Elementor widget/
   section/container: kicker, note-inline, card, tbcblock, speclist,
   mail, ph (+ r45/r43 + art-*) for placeholder photo boxes.
   ===================================================================== */

/* Anchor-nav offset so jumping to #mission, #engineering etc. doesn't
   hide the top of the section under the sticky header. Matches the
   header's actual single-row height at each range (nav padding/font is
   tightened between 1025-1800px so it stays single-row there too; only
   a narrow ~1025-1250px band still wraps to 2 rows, where this slightly
   undershoots rather than leaving a visible gap above the section). */
html{scroll-behavior:smooth;scroll-padding-top:135px}
@media (max-width:1024px){html{scroll-padding-top:110px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

:root{
  --paper:#FFFFFF;
  --cream:#F7F6F2;
  --ink:#111110;
  --muted:#6B6B66;
  --line:#E4E2DC;
  --pale-lime:#F4FBDE;
  --lime:#C2F000;
  --lime-deep:#A8D200;
  --tbc:#C8102E;

  --font-disp:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
}

@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/archivo/archivo-latin-variable.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/inter/inter-latin-variable.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/jetbrains-mono/jetbrains-mono-latin-400.woff2') format('woff2');
}

body{font-family:var(--font-body);color:var(--ink);background:var(--paper)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-disp);font-weight:700;letter-spacing:-.02em}

/* Kicker: matches the HTML spec file's .kicker rule exactly (black text on
   a lime pill) -- client chose pixel parity with that file over the
   developer guide's brand-guide correction. Hero's kicker is the one
   documented exception and stays plain/muted; style that instance directly
   rather than through this class. */
.kicker{
  display:inline-block;background:var(--lime);color:var(--ink);
  font-family:var(--font-body);font-weight:600;font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;padding:8px 15px;border-radius:9px;margin-bottom:20px;
}

.note-inline{
  background:var(--pale-lime);border-left:3px solid var(--lime);
  border-radius:0 14px 14px 0;padding:20px 24px;margin-top:20px;
}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;padding:24px 26px 26px;
}

.tbcblock{
  display:block;border:1px dashed var(--tbc);color:var(--tbc);
  padding:12px 16px;margin:20px 0;border-radius:8px;
  font-family:var(--font-mono);font-size:12.5px;
}
.tbc{
  color:var(--tbc);border-bottom:1px dotted var(--tbc);
  font-family:var(--font-mono);font-size:.88em;
}
.mail{border-bottom:1.5px solid var(--ink);white-space:nowrap}

.speclist{list-style:none;margin-top:20px;padding-left:0;border-top:1px solid var(--line)}
.speclist li{font-size:14.5px;color:var(--muted);padding:9px 0 9px 16px;border-bottom:1px solid var(--line);position:relative}
.speclist li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:1.5px;background:#B8B5AE}

/* Dynamic card grids (pricing/regulations/news): spec's own breakpoints
   (.models collapses at 860px, .grid3 collapses at 1040px then 860px). */
@media (max-width:1040px){
  .kt-card-grid-3{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:860px){
  .kt-card-grid-2,.kt-card-grid-3{grid-template-columns:1fr !important}
}

/* Placeholder photo boxes -- delete these classes once real photos go in. */
.ph{
  border-radius:18px;width:100%;background:var(--cream);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:22px;position:relative;overflow:hidden;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#9C9A93;
}
.ph b{font-family:var(--font-body);font-size:14px;letter-spacing:0;text-transform:none;color:#4A4844;font-weight:500;position:relative;z-index:2}
.ph>*{position:relative;z-index:2}
.ph::before{content:"";position:absolute;inset:0;z-index:1;opacity:.5}
.r45{aspect-ratio:4/5}.r43{aspect-ratio:4/3}
.art-works::before{background:linear-gradient(115deg,#1A1A18 0 42%,#C2F000 42% 46%,#E8E6E0 46%)}
.art-bench::before{background:repeating-linear-gradient(90deg,#DCDAD3 0 2px,transparent 2px 26px),repeating-linear-gradient(0deg,#DCDAD3 0 2px,transparent 2px 26px),#EFEDE7}
.art-test::before{background:linear-gradient(90deg,transparent 0 48%,#1A1A18 48% 50%,transparent 50%),repeating-linear-gradient(0deg,#D6D3CB 0 2px,transparent 2px 18px),#EFEDE7}
.art-ship::before{background:linear-gradient(135deg,#E2DFD7 0 50%,#EFEDE7 50%),linear-gradient(45deg,transparent 0 46%,#C2F000 46% 48%,transparent 48%)}
.art-office::before{background:linear-gradient(180deg,#EFEDE7 0 62%,#DCDAD3 62%),radial-gradient(circle at 78% 30%,#C2F000 0 6%,transparent 6%)}

/* Cal.com inline embed wrapper */
.kt-cal-embed{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper)}

/* Scroll-reveal for top-level page sections (hero, rows, pricing, etc.).
   Gated behind .kt-js (set synchronously in <head>, before paint) so a
   visitor with JS disabled simply sees the page fully visible -- the
   hidden state never applies without the reveal script present to
   remove it again. */
.kt-js main .elementor > .e-con.e-parent{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.16,.8,.24,1),transform .7s cubic-bezier(.16,.8,.24,1);
}
.kt-js main .elementor > .e-con.e-parent.kt-revealed{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .kt-js main .elementor > .e-con.e-parent{opacity:1 !important;transform:none !important;transition:none !important}
}

/* Contact page: direct-details list + Fluent Forms enquiry form */
.kt-direct{list-style:none;margin:0;padding:0}
.kt-direct li{display:flex;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.kt-direct .k{font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:0 0 104px;padding-top:4px}
.kt-direct .v{font-size:16px}
.kt-direct .v a{border-bottom:1.5px solid var(--ink)}

.formcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:clamp(24px,2.8vw,36px)}
.formcard .fluentform .ff-el-group{margin-bottom:17px}
.formcard .fluentform label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;font-family:var(--font-body)}
.formcard .fluentform .ff-el-is-required.asterisk-right label:after{content:" required" !important;color:var(--muted) !important;font-weight:400 !important;font-size:12.5px;margin-left:4px}
.formcard .fluentform .ff-el-form-control{width:100%;font-family:var(--font-body);font-size:15.5px;color:var(--ink);padding:12px 15px;border:1px solid #D3D1CA;border-radius:10px;background:var(--paper)}
.formcard .fluentform textarea.ff-el-form-control{min-height:112px;resize:vertical}
.formcard .fluentform .ff-el-form-control[type=file]{padding:10px;background:var(--cream);font-size:14px}
.formcard .fluentform .ff_upload_btn_wrap{background:var(--cream)}
.formcard .fluentform .ff-t-container{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.formcard .fluentform .ff-el-form-check{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--muted);margin:20px 0}
.formcard .fluentform .ff-el-form-check-label{font-family:var(--font-body);font-size:13px;color:var(--muted)}
.formcard .fluentform .ff-el-form-check-label a{color:var(--muted);border-bottom:1.5px solid var(--muted);text-decoration:none}
.formcard .fluentform input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;margin-top:2px}
.formcard .fluentform .ff-btn-submit{width:100%;justify-content:center;background:var(--lime) !important;color:var(--ink) !important;border-radius:100px !important;font-weight:600 !important;font-family:var(--font-body) !important;padding:15px 30px !important;border:0 !important;font-size:15px !important}
.formcard .fluentform .ff-btn-submit:hover{background:var(--lime-deep) !important}
@media (max-width:880px){
  .formcard .fluentform .ff-t-container{grid-template-columns:1fr}
  .kt-direct li{flex-direction:column;gap:4px}
  .kt-direct .k{flex:none}
}