/* NAAL Contact page — reproduces Contact.html reference */
.ct-wrap{max-width:1304px;margin:0 auto;padding-left:32px;padding-right:32px;box-sizing:border-box}
/* Map band */
.ct-map-wrap{padding-bottom:128px}
.ct-map{position:relative;border-radius:24px;overflow:hidden;background:#0E3B36;border:1px solid #D9D9D6;box-shadow:0 20px 44px -12px rgba(20,21,26,0.18)}
.ct-map-inner{position:relative;aspect-ratio:21/9}
.ct-map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.92) contrast(1.02)}
.ct-visit{position:absolute;left:24px;bottom:24px;max-width:380px;background:#161616;color:#fff;border-radius:16px;padding:26px 28px;box-shadow:0 20px 44px -12px rgba(20,21,26,0.18)}
.ct-visit-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ct-visit-top .ct-ic{color:#B99146;display:flex}
.ct-visit-top .ct-vl{font-family:var(--naal-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#DBC28C}
.ct-visit-addr{font-family:var(--naal-serif);font-weight:500;font-size:21px;line-height:1.25;letter-spacing:-.01em;margin-bottom:18px}
.ct-visit a{color:#DBC28C;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
/* The reference has no mobile override here: the map stays 21/9 and the visit
   card keeps left:24 bottom:24 max-width:380 at every width. */

/* ==========================================================================
   NAAL — Fluent Forms proposal wizard (form ID 3)
   Values taken from the reference Contact.html Wizard component.
   Replaces the former mailto-based .ct-* wizard markup.
   ========================================================================== */

.naal-ffwiz{background:#161616;border-radius:24px;padding:44px 40px;color:#fff;box-sizing:border-box}
.naal-ffwiz .ff-el-group{margin-bottom:0}

/* Progress bars */
.naal-ffwiz__bars{display:flex;gap:8px;margin-bottom:12px}
.naal-ffwiz__bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,0.16);transition:background 260ms ease}
.naal-ffwiz__bars i.on{background:#B99146}

/* Step header */
.naal-ffwiz__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px}
.naal-ffwiz__num{font-family:'Space Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#DBC28C}
.naal-ffwiz__name{font-family:'Playfair Display',Georgia,serif;font-size:20px}

/* Step panes */
.naal-ffwiz__body{display:grid;gap:18px;min-height:264px;align-content:start}
.naal-pane{gap:18px;align-content:start}
.naal-pane>.ff-el-group,.naal-ffwiz__pair>.ff-el-group{margin-bottom:0}


/* Inputs — reference `inp` */
.naal-ffwiz input[type=text],
.naal-ffwiz input[type=email],
.naal-ffwiz input[type=tel],
.naal-ffwiz textarea{width:100%;box-sizing:border-box;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.18);border-radius:12px;padding:14px 16px;font-size:15px;color:#fff;font-family:'Inter',system-ui,sans-serif;outline:none}
.naal-ffwiz input::placeholder,.naal-ffwiz textarea::placeholder{color:rgba(255,255,255,0.45)}
.naal-ffwiz input:focus,.naal-ffwiz textarea:focus{border-color:#B99146}
/* The reference textarea has rows=3 and no min-height, so it is 84.80 tall;
   min-height:96px was inflating it. */
.naal-ffwiz textarea{resize:vertical}

/* Two-up rows on step 1 — reference .grid2 */
.naal-ffwiz__pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Group labels — reference `lbl` */
.naal-ffwiz .naal-chips > label,
.naal-ffwiz .naal-chips .ff-el-input--label label{font-family:'Space Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:12px;display:block;font-weight:400}
.naal-ffwiz .naal-step--1 .ff-el-input--label{display:none}

/* Chips — reference Chip component */
.naal-chips .ff-el-input--content{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.naal-chips.naal-chips--3 .ff-el-input--content{grid-template-columns:repeat(3,1fr)}
.naal-chips .ff-el-form-check{margin:0}
.naal-chips .ff-el-form-check-label{display:block;margin:0;cursor:pointer}
.naal-chips .ff-el-form-check-label input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.naal-chips .ff-el-form-check-label span{display:block;font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:500;padding:10px 16px;border-radius:999px;text-align:left;border:1px solid rgba(255,255,255,0.2);background:transparent;color:rgba(255,255,255,0.85);transition:all 180ms ease}
/* reference Chip has no hover state */
.naal-chips .ff-el-form-check-label input[type=radio]:checked + span{border-color:#B99146;background:#B99146;color:#161616}
.naal-chips .ff-el-form-check-label input[type=radio]:focus-visible + span{outline:2px solid #B99146;outline-offset:2px}

/* Consent */
.naal-consent .ff-el-form-check-label{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:rgba(255,255,255,0.6);line-height:1.5;cursor:pointer}
.naal-consent .ff-el-form-check-label input[type=checkbox]{margin-top:3px;accent-color:#B99146;width:16px;height:16px;flex:0 0 auto}
.naal-consent .ff-el-input--label{display:none}

/* Navigation */
.naal-ffwiz__nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:16px}
/* The reference Back sets no padding, radius, line-height or white-space, so it
   keeps the UA button defaults: padding 1px 6px, radius 0, line-height normal.
   The theme was forcing line-height:22.5px, nowrap and a 3px radius, and the
   previous padding:0 removed 12px of width (69.05 -> 57.05). */
.naal-ffwiz__back{background:transparent;border:none;color:rgba(255,255,255,0.7);font-size:15px;font-family:var(--naal-sans);cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:1px 6px;border-radius:0;line-height:normal;white-space:normal}
.naal-ffwiz__back[hidden]{visibility:hidden;display:inline-flex}
/* reference Back has no hover state */
.naal-ffwiz__next,
.naal-ffwiz .ff-btn-submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;box-sizing:border-box;padding:12px 22px;background:#B99146;color:#161616;border:1px solid transparent;border-radius:999px;font-family:var(--naal-sans);font-size:15px;font-weight:500;line-height:1;cursor:pointer;transition:background-color 140ms cubic-bezier(0.2,0,0,1),color 140ms cubic-bezier(0.2,0,0,1)}
.naal-ffwiz__next:hover,.naal-ffwiz .ff-btn-submit:hover{background:#DBC28C}
.naal-ffwiz .naal-submit{margin:0}
.naal-ffwiz .naal-submit.is-hidden{display:none}

/* Error states */
.naal-ffwiz .ff-el-is-error input,
.naal-ffwiz .ff-el-is-error textarea{border-color:#E9917F}
.naal-ffwiz .text-danger,.naal-ffwiz .error,.naal-ffwiz .naal-err{color:#E9917F;font-size:13px;margin-top:6px}

/* Success card — reference `done` state */
.naal-ffwiz .ff-message-success,
.naal-ffwiz-success{background:#161616;border-radius:24px;padding:64px 40px;color:#fff;text-align:center;border:none;box-sizing:border-box}
.naal-ffwiz .ff-message-success{padding:0}
.naal-ffwiz-success__check{width:64px;height:64px;border-radius:999px;background:#B99146;color:#161616;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
.naal-ffwiz-success h3{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:30px;letter-spacing:-.015em;margin:0 0 12px;color:#fff}
.naal-ffwiz-success p{font-size:17px;line-height:1.55;color:rgba(255,255,255,0.7);max-width:400px;margin:0 auto}

/* The reference only collapses .grid2 at 860. The wizard keeps its 44px 40px
   padding, 24px radius and 264px min-height, and the chip grids are inline
   styled (not .grid2) so they stay at 2 and 3 columns. Only the name/org and
   email/phone pairs carry className="grid2" and therefore collapse. */
@media (max-width:860px){
  .naal-ffwiz__pair{grid-template-columns:1fr}
}

/* ---------- Form band ----------
   Reference: <Wrap paddingTop:56 paddingBottom:112> containing a .grid2 of
   1fr / 1.3fr with a 48px gap and align-items:stretch. The left column
   ('What happens next' + contact details) was missing entirely and the wizard
   was centred at 1176 across the full band. */
/* This container is e-con-full, so Elementor renders no .e-con-inner and the
   widgets are direct children - the band element IS the Wrap. */
#ct-form{max-width:1304px;margin:0 auto;padding:56px 32px 112px;box-sizing:border-box;
  display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:stretch}
#ct-form > .elementor-widget{width:auto;max-width:none;margin:0}

/* Left column - reference Form() */
.ct-next{display:flex;flex-direction:column;gap:28px}
.ct-next-h{font-family:var(--naal-serif);font-weight:500;font-size:24px;letter-spacing:-.01em;margin-bottom:4px}
.ct-step{display:flex;gap:16px;align-items:flex-start}
.ct-step-n{font-family:var(--naal-mono);font-size:13px;color:#9C7734;margin-top:3px}
.ct-step-t{font-family:var(--naal-serif);font-size:19px;font-weight:500;margin-bottom:2px}
.ct-step-b{font-size:15px;color:#5A5954;line-height:1.5}
.ct-details{border-top:1px solid #D9D9D6;padding-top:24px;display:flex;flex-direction:column;gap:18px}
.ct-det{display:flex;gap:14px;align-items:center}
.ct-det-ic{color:#9C7734;display:flex}
.ct-det-v{font-size:15px;color:#161616}
@media (max-width:860px){#ct-form{grid-template-columns:1fr}}

/* ---------- Contact hero ----------
   These were living in an inline <style> block inside the watermark HTML widget
   and leaned on !important; moved here and given the load-bearing
   display:inline-block the patch was missing. */
#about-hero h1{display:inline-block;max-width:960px;margin-left:auto;margin-right:auto;font-family:var(--naal-serif)}
#about-hero .elementor-widget-text-editor p{max-width:600px;margin-left:auto;margin-right:auto;margin-bottom:0}
#about-hero .naal-eyebrow .elementor-heading-title{font-family:var(--naal-mono)}

/* The map band is an Elementor flex container and .ct-map-inner sizes from
   aspect-ratio:21/9 around a lazy iframe. In a flex column that is a cyclic
   width/height dependency, so the container measured 258.16 while its own child
   Wrap was 268.80 - i.e. the band under-reported by 10.6px and the footer rode
   up over it below 430. A block container removes the cycle. */
#ct-map-band{display:block}

/* Fluent Forms puts margin:0 0 7px on .ff-el-form-check-label and forces
   line-height:16px, so each chip was 35.60 tall in a 42.60 row instead of the
   reference's 38.40 (the reference <button> keeps line-height:normal, giving a
   16.8px content box inside 10px/16px padding). Both need a (0,3,0) selector to
   outrank the plugin's own rules. */
/* Fluent Forms ships .ff-default .ff-el-form-check label.ff-el-form-check-label
   which is (0,3,1) - a (0,3,0) selector loses to it, so match its element too. */
.naal-ffwiz .naal-chips .ff-el-form-check label.ff-el-form-check-label{margin:0}
.naal-ffwiz .naal-chips .ff-el-form-check-label span{line-height:normal}

/* Same (0,3,1) plugin-specificity problem as the chips: the consent label was
   rendering at the inherited 16px instead of the reference's 13px/1.5. */
.naal-ffwiz .naal-consent .ff-el-form-check label.ff-el-form-check-label{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:rgba(255,255,255,0.6);margin:0;cursor:pointer}

/* Fluent Forms' .ff-default textarea sets min-height:90px; the reference sizes
   purely from rows=3 (84.80). And .ff-el-form-check carries a 5px bottom margin
   that the reference consent row does not have. */
.naal-ffwiz textarea{min-height:0}
.naal-ffwiz .naal-consent .ff-el-form-check{margin:0}

/* Fluent Forms' .ff-default textarea (0,1,1) ties with .naal-ffwiz textarea and
   wins on order, forcing padding:11px 15px and line-height:15px - the reference
   textarea is 14px 16px with line-height:normal, so rows=3 gives 84.80 not 68.60. */
.naal-ffwiz .ff-el-input--content textarea{padding:14px 16px;line-height:normal;min-height:0;font-family:var(--naal-sans);font-size:15px;color:#fff}

/* The reference labels its inputs with aria-label + placeholder only; the sole
   visible labels are the four chip-group headings. Fluent Forms renders a label
   for every field, which added a 25.64px 'Message' heading above the textarea. */
.naal-ffwiz .naal-pane .ff-el-input--label{display:none}
.naal-ffwiz .naal-chips .ff-el-input--label{display:block}

/* Fluent Forms' own :focus rule was painting the border Chrome-blue, which
   matches neither the reference (it sets outline:none and no :focus style at
   all) nor this build's intent. Kept as a deliberate a11y improvement over the
   reference, but in the design system's gold rather than the plugin's blue. */
.naal-ffwiz .ff-el-input--content input:focus,
.naal-ffwiz .ff-el-input--content textarea:focus{border-color:#B99146;outline:none;box-shadow:none}