@charset "UTF-8";
/* ==========================================================================
NICHOLS & CANE — DESIGN SYSTEM FRAMEWORK
--------------------------------------------------------------------------
Reusable, Gutenberg-compatible CSS foundation extracted from the approved
Figma "Landing Page_V10" (node 316-522).

Design language
---------------
• Type      : Tiro Kannada (single-weight serif) throughout; hierarchy is
built from size / letter-spacing / case / colour, not weight.
• Palette   : warm cream page (#FAF6EE) alternating with deep navy sections
(#081A32 / #102540); gold (#C9A46A) + bronze (#B18A5A) accents.
• Shape     : sharp corners (radius 0); glass panels (white 5% + 4px blur);
gold hairline accent bars beneath buttons & card labels.
• Eyebrows  : uppercase, wide tracking, flanked by short gold rules.
• Scaling   : fluid via clamp(); media queries only for structural changes.

Load order  : framework.css  →  app.css  (see inc/setup.php)

Contents
--------
01. Fonts
02. Tokens (CSS custom properties)
03. Reset & base
04. Base typography
05. Layout utilities (container / grid / flex / width / height)
06. Spacing utilities (margin / padding / gap / section)
07. Typography utilities (headings / eyebrow / lead / colour / weight / align)
08. Buttons
09. Forms
10. Interactive states (hover / focus / a11y)
11. Gutenberg overrides
12. Responsive (structural breakpoints)
========================================================================== */


/* ==========================================================================
01. FONTS
========================================================================== */
/* Tiro Kannada ships regular (400) + italic only. Prefer enqueuing in
inc/setup.php for performance; this @import keeps the framework portable. */
/* @import url("https://fonts.googleapis.com/css2?family=Tiro+Kannada:ital@0;1&display=swap"); */


/* ==========================================================================
02. TOKENS
========================================================================== */
:root {

	/* --- Brand colours ----------------------------------------------------- */
	--color-navy-900:      #081A32;  /* header, dark sections, headings on light */
	--color-navy-800:      #102540;  /* footer                                   */
	--color-navy-700:      #0D2140;  /* primary button base                      */
	--color-gold:          #C9A46A;  /* primary accent / accent bars             */
	--color-gold-dark:     #B18A5A;  /* bronze — icons, rules, borders           */
	--color-cream:         #FAF6EE;  /* page background                          */
	--color-beige:         #F1EBDC;  /* alternate section background             */
	--color-ink:           #2F3135;  /* body text on light                       */
	--color-white:         #FFFFFF;

	--s-header-bg-color: var(--color-navy-900);
	--s-header-menu-text-color: var(--color-white);
	--s-header-menu-text-hover-color: var(--color-gold);
	--s-primary-color: var(--color-navy-900);

	/* Semantic aliases */
	--color-primary:       var(--color-navy-900);
	--color-secondary:     var(--color-gold);
	--color-accent:        var(--color-gold);
	--color-accent-2:      var(--color-gold-dark);
	--color-text:          var(--color-ink);
	--color-heading:       var(--color-navy-900);
	--color-text-invert:   var(--color-cream);
	--color-bg:            var(--color-cream);
	--color-bg-alt:        var(--color-beige);
	--color-bg-dark:       var(--color-navy-900);

	/* Surfaces / lines */
	--color-glass:         rgba(255, 255, 255, 0.05);   /* card panel on dark   */
	--color-overlay-soft:  rgba(250, 246, 238, 0.20);   /* watermark vectors    */
	--color-overlay-softer:rgba(250, 246, 238, 0.30);
	--color-border:        rgba(250, 246, 238, 0.20);   /* hairline on dark     */
	--color-border-ink:    rgba(47, 49, 53, 0.15);      /* hairline on light    */

	/* State helpers */
	--color-focus-ring:    var(--color-gold);
	--color-disabled:      #9A9A9A;

	/* --- Typography -------------------------------------------------------- */
	--font-heading:  "Tiro Kannada", Georgia, "Times New Roman", serif;
	--font-body:     "Tiro Kannada", Georgia, "Times New Roman", serif;
	--font-ui:       "Tiro Kannada", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;

	/* Fluid font sizes (min @375px → max @1920px) */
	--fs-display:    clamp(2.5rem, 1.878rem + 2.65vw, 5.0625rem);   /* 40 → 81 */
	--fs-h1:         clamp(2.25rem, 1.886rem + 1.55vw, 3.75rem);    /* 36 → 60 */
	--fs-h2:         clamp(1.875rem, 1.602rem + 1.17vw, 3rem);      /* 30 → 48 */
	--fs-h3:         clamp(1.5rem, 1.318rem + 0.777vw, 2.25rem);    /* 24 → 36 */
	--fs-h4:         clamp(1.125rem, 1.064rem + 0.259vw, 1.375rem); /* 18 → 22 */
	--fs-eyebrow-lg: clamp(1.125rem, 0.973rem + 0.647vw, 1.75rem);  /* 18 → 28 */
	--fs-eyebrow:    clamp(1rem, 0.94rem + 0.259vw, 1.375rem);      /* 16 → 22 */
	--fs-lead:       clamp(1.125rem, 1.064rem + 0.259vw, 1.375rem); /* 18 → 22 */
	--fs-body:       clamp(1rem, 0.97rem + 0.129vw, 1.125rem);      /* 16 → 18 */
	--fs-small:      clamp(0.8125rem, 0.797rem + 0.065vw, 0.875rem);/* 13 → 14 */

	/* Font weights (Tiro Kannada is single-weight; helpers apply to fallbacks) */
	--fw-regular:    400;
	--fw-medium:     500;
	--fw-bold:       700;

	/* Line heights (unitless where possible; matches Figma ratios) */
	--lh-tight:      1.05;   /* display / large headings */
	--lh-heading:    1.15;
	--lh-snug:       1.4;
	--lh-body:       1.75;   /* 32/18 */
	--lh-loose:      1.8;

	/* Letter spacing */
	--ls-heading:    0.01em;
	--ls-eyebrow:    0.12em;  /* wide tracking on uppercase eyebrows */
	--ls-label:      0.06em;
	--ls-body:       0;

	/* --- Spacing scale (fluid) -------------------------------------------- */
	--space-3xs:     clamp(0.375rem, 0.345rem + 0.129vw, 0.5rem);   /* 6  → 8   */
	--space-2xs:     clamp(0.5rem, 0.47rem + 0.129vw, 0.625rem);    /* 8  → 10  */
	--space-xs:      clamp(0.75rem, 0.689rem + 0.259vw, 1rem);      /* 12 → 16  */
	--space-sm:      clamp(1rem, 0.939rem + 0.259vw, 1.25rem);      /* 16 → 20  */
	--space-md:      clamp(1.25rem, 1.098rem + 0.647vw, 1.875rem);  /* 20 → 30  */
	--space-lg:      clamp(1.875rem, 1.572rem + 1.29vw, 3.125rem);  /* 30 → 50  */
	--space-xl:      clamp(2.5rem, 2.197rem + 1.29vw, 3.75rem);     /* 40 → 60  */
	--space-2xl:     clamp(3.125rem, 2.67rem + 1.94vw, 5rem);       /* 50 → 80  */
	--space-3xl:     clamp(3.75rem, 3.143rem + 2.59vw, 6.25rem);    /* 60 → 100 */

	/* Section rhythm & page gutter */
	--space-section: clamp(4rem, 3.15rem + 3.62vw, 7.5rem);         /* 64 → 120 */
	--gutter:        clamp(1.5rem, 0.347rem + 4.92vw, 6.25rem);     /* 24 → 100 */

	/* Static fixed steps (for exact 10px-grid needs) */
	--space-10: 0.625rem;  --space-20: 1.25rem;   --space-30: 1.875rem;
	--space-40: 2.5rem;    --space-50: 3.125rem;   --space-60: 3.75rem;

	/* --- Containers ------------------------------------------------------- */
	--container-max:    1720px;  /* Figma content width */
	--container-wide:   1440px;
	--container-narrow: 1080px;
	--container-text:   760px;   /* comfortable reading measure */

	/* --- Border radius (design is predominantly sharp) -------------------- */
	--radius-none: 0;
	--radius-sm:   2px;
	--radius-md:   4px;
	--radius-lg:   8px;
	--radius-pill: 999px;

	/* --- Borders / accent bar -------------------------------------------- */
	--border-hairline: 1px;
	--border-thick:    2px;
	--accent-bar:      6px;   /* gold underline on buttons */
	--accent-bar-sm:   3px;   /* gold underline on labels/outline btn */

	/* --- Shadows / blur -------------------------------------------------- */
	--shadow-none:   none;
	--shadow-sm:     0 2px 8px rgba(8, 26, 50, 0.08);
	--shadow-card:   0 18px 50px rgba(8, 26, 50, 0.14);
	--shadow-focus:  0 0 0 3px rgba(201, 164, 106, 0.55);
	--blur-glass:    4px;

	/* --- Motion --------------------------------------------------------- */
	--ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
	--transition:    220ms var(--ease);
	--transition-slow: 400ms var(--ease);

	/* --- Z-index scale -------------------------------------------------- */
	--z-below:   -1;
	--z-base:     1;
	--z-sticky:  100;
	--z-header:  200;
	--z-overlay: 900;
	--z-modal:  1000;
	--z-toast:  1100;

	/* --- Breakpoints (reference; CSS vars can't drive media queries) ----- */
	--bp-xl:   1440px;
	--bp-lg:   1200px;
	--bp-md:   1024px;
	--bp-sm:    768px;
	--bp-xs:    576px;
	--bp-2xs:   480px;
}


/* ==========================================================================
03. RESET & BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	-webkit-tap-highlight-color: transparent;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	color: var(--color-text);
	background-color: var(--color-bg);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, picture, svg, video, canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

body:not(.logged-in) img {
	pointer-events: none;
}

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: var(--color-accent-2); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-gold); }

ul, ol { padding: 0; list-style-position: inside; }

hr {
	border: 0;
	height: var(--border-hairline);
	background: var(--color-border-ink);
	margin:0;
}

body :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-heading);
	font-weight: var(--fw-regular);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	color: var(--color-heading);
}

::selection { background: var(--color-gold); color: var(--color-white); }


/* ==========================================================================
04. BASE TYPOGRAPHY
========================================================================== */
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-eyebrow); }
h6, .h6 { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-label); }

small, .text-small { font-size: var(--fs-small); }

strong, b { font-weight: var(--fw-bold); }
em, i     { font-style: italic; }

blockquote {
	font-family: var(--font-heading);
	font-size: var(--fs-lead);
	line-height: var(--lh-snug);
	font-style: italic;
}

.site-content{
	overflow: unset;
}

/* ==========================================================================
05. LAYOUT UTILITIES
========================================================================== */

/* Containers — centred, gutter padding via clamp */
.container,
.container-fluid,
.container-wide,
.container-narrow,
.container-text {
	width: 100%;
	margin-inline: auto;
/* 	padding-inline: var(--gutter); */
}
/* .container        { max-width: calc(var(--container-max) + var(--gutter) * 2); } */
.container        { max-width: max-width: 1720px; width: 95%; }
.container-wide   { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.container-narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container-text   { max-width: calc(var(--container-text) + var(--gutter) * 2); }
.container-fluid  { max-width: 100%; }

/* Flex */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col    { flex-direction: column; }
.flex-row    { flex-direction: row; }
.flex-wrap   { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1      { flex: 1 1 0%; }
.flex-auto   { flex: 1 1 auto; }
.flex-none   { flex: none; }

/* Grid */
.grid        { display: grid; }
.grid-2      { grid-template-columns: repeat(2, 1fr); }
.grid-3      { grid-template-columns: repeat(3, 1fr); }
.grid-4      { grid-template-columns: repeat(4, 1fr); }
/* Auto-fit responsive grid — no media query needed */
.grid-auto   { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-auto-sm{ grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.grid-auto-lg{ grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }

/* Alignment */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

.self-start   { align-self: flex-start; }
.self-center  { align-self: center; }
.self-end     { align-self: flex-end; }

/* Position / display */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; top: 0; }
.fixed    { position: fixed; }
.block    { display: block; }
.inline-block { display: inline-block; }
.hidden   { display: none; }
.overflow-hidden { overflow: hidden; }

/* Width / height helpers */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-fit  { width: fit-content; }
.max-w-text { max-width: var(--container-text); }
.mx-auto { margin-inline: auto; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; min-height: 100svh; }


/* ==========================================================================
06. SPACING UTILITIES
========================================================================== */

/* Gap */
.gap-0   { gap: 0; }
.gap-2xs { gap: var(--space-2xs); }
.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }

/* Margin — all sides */
.m-0 { margin: 0 !important; }
.m-auto { margin: auto !important; }

/* Margin block (top/bottom) */
.mt-0 { margin-top: 0 !important; }   .mb-0 { margin-bottom: 0 !important; }
.mt-xs { margin-top: var(--space-xs); }   .mb-xs { margin-bottom: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }   .mb-sm { margin-bottom: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }   .mb-md { margin-bottom: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }   .mb-lg { margin-bottom: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }   .mb-xl { margin-bottom: var(--space-xl); }
.mt-2xl{ margin-top: var(--space-2xl); }  .mb-2xl{ margin-bottom: var(--space-2xl); }

/* Padding — all sides */
.p-0  { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }   .pb-0 { padding-bottom: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.p-sm { padding: var(--space-sm) !important; }
.p-md { padding: var(--space-md) !important; }
.p-lg { padding: var(--space-lg) !important; }
.p-xl { padding: var(--space-xl) !important; }

/* Padding inline / block */
.px-md { padding-inline: var(--space-md); }
.px-lg { padding-inline: var(--space-lg); }
.py-md { padding-block: var(--space-md); }
.py-lg { padding-block: var(--space-lg); }

/* Section rhythm */
.section     { padding-block: var(--space-section); }
.section-sm  { padding-block: calc(var(--space-section) * 0.6); }
.section-lg  { padding-block: calc(var(--space-section) * 1.3); }
.section-top { padding-top: var(--space-section); }
.section-bottom { padding-bottom: var(--space-section); }

/* Vertical flow — consistent spacing between children */
.flow > * + * { margin-top: var(--space-md); }
.flow-sm > * + * { margin-top: var(--space-sm); }
.flow-lg > * + * { margin-top: var(--space-lg); }


/* ==========================================================================
07. TYPOGRAPHY UTILITIES
========================================================================== */

/* Display / heading scale as classes (decouples visual size from tag) */
.text-display, .text-display .stk-block-heading__text { font-family: var(--font-heading); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); color: var(--color-heading); }
.text-h1, .text-h1 .stk-block-heading__text { font-family: var(--font-heading); font-size: var(--fs-h1); line-height: var(--lh-heading); }
.text-h2, .text-h2 .stk-block-heading__text { font-family: var(--font-heading); font-size: var(--fs-h2); line-height: var(--lh-heading); }
.text-h3, .text-h3 .stk-block-heading__text { font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-snug); }
.text-h4, .text-h4 .stk-block-heading__text { font-family: var(--font-heading); font-size: var(--fs-h4); line-height: var(--lh-snug); }

.text-lead, .text-lead .stk-block-heading__text { font-size: var(--fs-lead); line-height: var(--lh-snug); }
.text-body, .text-body .stk-block-heading__text { font-size: var(--fs-body); line-height: var(--lh-body); }
.text-small, .text-small .stk-block-heading__text { font-size: var(--fs-small); }

/* Eyebrow — uppercase kicker flanked by gold rules (Figma pattern) */
.eyebrow, .eyebrow .stk-block-heading__text {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-heading);
	font-size: var(--fs-eyebrow);
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-ink);
}
.eyebrow--lg, .eyebrow--lg .stk-block-heading__text { font-size: var(--fs-eyebrow-lg); }
.eyebrow--center { justify-content: center; }
/* leading + trailing rule */
.eyebrow::before,
.eyebrow--rule::after {
	content: "";
	width: clamp(2.5rem, 4vw, 6.125rem);   /* ~40 → 98px */
	height: 2px;
	background: var(--color-gold);
	flex: none;
}
.eyebrow--start::before { display: none; }     /* rule only after text */

/* Label — small uppercase (card titles, form labels) */
.label {
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	line-height: 1.5;
	color: var(--color-navy-900);
}

/* Alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-balance{ text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* Transform */
.uppercase  { text-transform: uppercase; letter-spacing: var(--ls-label); }
.capitalize { text-transform: capitalize; }
.italic     { font-style: italic; }

/* Weight (applies to fallback fonts; Tiro Kannada renders 400) */
.fw-regular { font-weight: var(--fw-regular); }
.fw-medium  { font-weight: var(--fw-medium); }
.fw-bold    { font-weight: var(--fw-bold); }

/* Tracking */
.tracking-0    { letter-spacing: var(--ls-booy); }
.tracking-heading { letter-spacing: var(--ls-heading); }
.tracking-wide    { letter-spacing: var(--ls-eyebrow); }

/* Text colour helpers */
.text-primary  { color: var(--color-navy-900); }
.text-ink      { color: var(--color-ink); }
.text-gold     { color: var(--color-gold); }
.text-bronze   { color: var(--color-gold-dark); }
.text-white    { color: var(--color-white); }
.text-cream    { color: var(--color-cream); }
.text-muted    { color: color-mix(in srgb, var(--color-ink) 70%, transparent); }
.text-invert   { color: var(--color-cream); }

/* Font-family helpers */
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }
.font-ui      { font-family: var(--font-ui); }

/* Line clamp */
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }


/* ==========================================================================
08. BUTTONS
--------------------------------------------------------------------------
Base .btn is sharp-cornered with a gold accent bar underneath.
Variants: --primary (navy) · --secondary (gold) · --outline · --text
========================================================================== */
.btn {
	--_bar: var(--color-gold);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: clamp(0.875rem, 0.8rem + 0.4vw, 1.1875rem) clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: var(--ls-heading);
	color: var(--color-white);
	background: var(--color-navy-700);
	border-radius: var(--radius-none);
	cursor: pointer;
	transition: background var(--transition), color var(--transition),
		transform var(--transition), box-shadow var(--transition);
	position: relative;
	z-index: 1;
	font-weight: 400;
}
/* Gold accent bar */
.btn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--accent-bar);
	background: var(--_bar);
	transition: background var(--transition), height var(--transition);
	z-index: -1;
}

.btn:hover  {color: var(--color-navy-700);}
.btn:active { transform: translateY(0); }
.btn:hover::after {height: 100%;}

/* Primary (default look, explicit modifier for clarity) */
.btn--primary { color: var(--color-white); background: var(--color-navy-700); }
.btn--primary:hover { background: var(--color-navy-900); }

/* Secondary — solid gold */
.btn--secondary {
	color: var(--color-navy-900);
	background: var(--color-gold);
	--_bar: var(--color-navy-900);
}
.btn--secondary:hover { background: var(--color-gold-dark); color: var(--color-white); }

/* Outline — transparent with gold border + gold bar (header CTA) */
.btn--outline {
	color: var(--color-navy-900);
	background: transparent;
	border-color: var(--color-gold);
	--_bar: var(--color-gold);
}
.btn--outline::after { height: var(--accent-bar-sm); }
.btn--outline:hover { background: var(--color-gold); color: var(--color-navy-900); }
/* On dark surfaces */
.on-dark .btn--outline, .btn--outline.is-inverse { color: var(--color-cream); }

/* Text button — link style with animated underline */
.btn--text {
	padding-inline: 0;
	color: var(--color-navy-900);
	background: transparent;
}
.btn--text::after { height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; }
.btn--text:hover { background: transparent; transform: none; color: var(--color-gold-dark); }
.btn--text:hover::after { transform: scaleX(1); }

/* Sizes */
.btn--sm { font-size: var(--fs-small); padding: 0.625rem 1.25rem; }
.btn--lg { font-size: var(--fs-eyebrow); padding: 1.25rem 3rem; }
.btn--block { display: flex; width: 100%; }

/* Disabled */
.btn:disabled, .btn.is-disabled, .btn[aria-disabled="true"] {
	background: var(--color-disabled);
	color: var(--color-white);
	cursor: not-allowed;
	opacity: 0.65;
	transform: none;
	pointer-events: none;
}
.btn:disabled::after { background: color-mix(in srgb, var(--color-disabled) 60%, #000); }


/* ==========================================================================
09. FORMS
========================================================================== */
.form-field { display: flex; flex-direction: column; gap: var(--space-2xs); }

.form-label {
	font-family: var(--font-heading);
	font-size: var(--fs-body);
	color: var(--color-ink);
}

/* Inputs — white fields, sharp corners, gold focus (Figma contact form) */
.input,
.textarea,
.select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="search"],
select,
textarea {
	width: 100% !important;
	padding: clamp(0.875rem, 0.744vw + 0.518rem, 1.1875rem) clamp(1.125rem, 1.19vw + 0.554rem, 1.625rem) !important;
	font-family: var(--font-body);
	font-size: var(--fs-body) !important;
	color: var(--lh-body);
	background: var(--color-white);
	border: none;
	border-radius: var(--radius-none);
	transition: border-color var(--transition), box-shadow var(--transition);
	appearance: none;
	line-height: 1.2;
}

.textarea, textarea {min-height: 8.5rem;padding-bottom: 5.5rem !important;resize: vertical !important;}

::placeholder { color: var(--color-ink); opacity: 0.75; }

/* Select with custom gold-navy caret */
.select, select {
	padding-right: 3.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='%23081A32' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.625rem center;
	background-size: 0.95rem;
}

/* Focus */
.input:focus, .textarea:focus, .select:focus,
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--color-gold);
	box-shadow: var(--shadow-focus);
}

/* Validation */
.input.is-invalid, input:invalid:not(:placeholder-shown) { border-color: #B4402E; }
.field-hint  { font-size: var(--fs-small); color: var(--color-ink); opacity: 0.7; }
.field-error { font-size: var(--fs-small); color: #B4402E; }

/* Checkbox / radio */
.checkbox, .radio { display: inline-flex; align-items: center; gap: var(--space-2xs); cursor: pointer; }
.checkbox input, .radio input { width: 1.15rem; height: 1.15rem; accent-color: var(--color-gold); }

/* Form grid (2-column, collapses on small screens) */
.form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
}
.form-grid .col-span-2, .form-grid .full { grid-column: 1 / -1; }


/* ==========================================================================
10. INTERACTIVE STATES & ACCESSIBILITY
========================================================================== */
/* Visible keyboard focus for all interactive elements */
:where(a, button, .btn, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--color-focus-ring) !important;
	outline-offset: 2px;
}
/* The .btn already draws its own ring via box-shadow on focus */
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Screen-reader only */
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -999px; top: 0; z-index: var(--z-toast);
	background: var(--color-navy-900); color: var(--color-white); padding: var(--space-sm) var(--space-md);
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ==========================================================================
11. GUTENBERG OVERRIDES
--------------------------------------------------------------------------
Map framework tokens onto core block markup with minimal specificity so
both core and custom blocks inherit the design system.
========================================================================== */

/* Content width for constrained blocks */
:root {
	--wp--style--global--content-size: var(--container-narrow);
	--wp--style--global--wide-size: var(--container-max);
}

/* Alignments */
.alignfull  { width: 100%; margin-inline: 0; }
.alignwide  { max-width: var(--container-max); margin-inline: auto; }
.aligncenter{ margin-inline: auto; }

/* core/button → framework .btn look */
.wp-block-button__link {
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: var(--ls-heading);
	border-radius: var(--radius-none);
	padding: 1rem 2.25rem;
	background-color: var(--color-navy-700);
	color: var(--color-white);
	transition: background var(--transition), transform var(--transition);
}
.wp-block-button__link:hover { background-color: var(--color-navy-900); transform: translateY(-2px); }
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; color: var(--color-navy-900); border: 1px solid var(--color-gold);
}

/* core/heading, paragraph inherit tokens */
.wp-block-heading { font-family: var(--font-heading); color: var(--color-heading); }
/* .wp-block-post-content p { max-width: 68ch; } */

/* core/columns → align to grid gap tokens */
.wp-block-columns { gap: var(--space-lg); }
.wp-block-column { min-width: 0; }

/* core/group padding contexts */
.wp-block-group.has-background { padding: var(--space-xl); }

/* core/image */
.wp-block-image img { border-radius: var(--radius-none); }
.wp-block-image.is-style-rounded img { border-radius: var(--radius-lg); }

/* core/quote → testimonial styling */
.wp-block-quote {
	border-left: var(--accent-bar-sm) solid var(--color-gold);
	padding-left: var(--space-md);
	font-family: var(--font-heading);
	font-style: italic;
}
.wp-block-quote cite { font-style: normal; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }

/* core/separator → gold divider */
.wp-block-separator { border: 0; height: 2px; background: var(--color-gold); max-width: 6.125rem; opacity: 1; }
.wp-block-separator.is-style-wide { max-width: 100%; height: 1px; background: var(--color-border-ink); }

/* core/list markers */
.wp-block-list { padding-left: 1.25rem; }

/* Colour palette classes (register matching names in theme.json) */
.has-navy-color        { color: var(--color-navy-900); }
.has-navy-background-color        { background-color: var(--color-navy-900); }
.has-gold-color        { color: var(--color-gold); }
.has-gold-background-color        { background-color: var(--color-gold); }
.has-cream-background-color       { background-color: var(--color-cream); }
.has-beige-background-color       { background-color: var(--color-beige); }
.has-ink-color         { color: var(--color-ink); }


/* ==========================================================================
12. RESPONSIVE — structural breakpoints only
(fluid clamp() handles the rest of the scaling)
========================================================================== */

/* ≤1200px — tighten wide grids */
@media (max-width: 1200px) {
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ≤1024px — collapse 3-column grids */
@media (max-width: 1024px) {
	.grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ≤768px — single column */
@media (max-width: 768px) {
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
	.form-grid { grid-template-columns: 1fr; }
}

/* ≤576px — full-width buttons */
@media (max-width: 576px) {
	.btn { width: 100%; }
}

/* ≤480px — smallest phones */
@media (max-width: 480px) {
	.eyebrow::before, .eyebrow--rule::after { width: 1.75rem; }
}

.back-top {
    background: var(--color-gold);
    bottom: 0;
    top: unset;
    opacity: 1;
    color: var(--color-navy-900);
	transition: all .3s ease-in-out;
}

.back-top:hover {
    background: var(--color-navy-900);
    color: var(--color-white);
}

@media screen and (min-width: 600px) {
	.admin-bar .back-top {
		top: unset;
	}
}

/* Gravity */
.gform_wrapper.gravity-theme .ginput_container_date img.ui-datepicker-trigger {
	position: absolute;
	right: 20px;
	pointer-events: none;
}

.gform_wrapper.gravity-theme .gform_validation_errors>h2 {
	font-size: var(--fs-body);
	line-height: 1.4;
}

.gravity-theme.ui-datepicker .ui-datepicker-header select,.gravity-theme.ui-datepicker .ui-datepicker-header select.ui-datepicker-month {
	font-size: var(--fs-body) !important;
	width: auto !important;
}

.gravity-theme.ui-datepicker .ui-datepicker-calendar th span,
.gravity-theme.ui-datepicker .ui-datepicker-calendar td{
	font-size: var(--fs-body) !important;
}

.gform_required_legend {
    display: none;
}

@media (max-width: 640px) {
	.gravity-theme.ui-datepicker {
		max-width: 400px;
		width: 90%;
	}

	.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-default,
	.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-disabled .ui-state-default {
		height: 40px;
		width: 40px;
	}

	@media (max-width: 640px) {
		.gform_wrapper.gravity-theme .ginput_complex span:not(:last-child) {
			margin-bottom: 16px;
		}
	}
}