/* ==========================================================================
   Sri Vaari Infra — marketing site
   Component classes transcribed from the design system's component source
   (_ds_bundle.js: Button, Card, SectionHeading, Wordmark, Field, Input,
   Select, Textarea). Values are the components' own, not approximations.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page-level brand override, carried verbatim from the artboard's <helmet>.
   MarketingSite.dc.html re-points the cream ramp at white, so this page is
   white-surfaced rather than cream. Without this the whole page reads warm.
   -------------------------------------------------------------------------- */
:root{
  --cream-50:#FFFFFF;--cream-100:#FFFFFF;--cream-200:#F4F6F5;
  --cream-300:#D3DAD5;--cream-400:#B9C3BD;
}

a{text-decoration:none;color:var(--brand);transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--green-500);text-decoration:underline}
footer a{color:var(--green-200)}
footer a:hover{color:var(--cream-100);text-decoration:underline}

html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

img{max-width:100%}

.sv-page{background:var(--surface-page);min-height:100vh;font-family:var(--font-text)}

/* Skip link — not in the artboard; a keyboard user needs a way past the nav. */
/* Fixed, not absolute: an absolutely-positioned skip link anchors to the document, so
   once the page is scrolled it focuses off-screen. Every nav item here is an in-page
   anchor, so that is the normal case, not the edge case. */
.sv-skip{position:fixed;left:-9999px;top:12px;z-index:100;background:var(--brand);
  color:var(--cream-100);padding:12px 20px;border:0;border-radius:var(--radius-sm)}
.sv-skip:focus{left:var(--gutter)}

/* ==========================================================================
   Wordmark  —  components/brand/Wordmark.jsx, size "sm" (scale 26)
   ========================================================================== */
/* The lockup: mark on the left, name / rule / tagline stacked on the right, with an
   11px gap that follows the same .42-of-name-size ratio as the logo files.
   A grid rather than a flex row, so the mark can be positioned against the *rule*
   rather than against the type block as a whole — the plated mark centres on the
   whole block, the bare one ends on the rule. `.sv-wordmark__type` is display:contents
   so name, rule and tagline become rows of this grid directly.
   The three rows are declared, not implicit: `grid-row:1/-1` counts to the last line
   of the *explicit* grid, so without them the mark collapses into row one and drags
   the name's row down to its own 44px. */
.sv-wordmark{display:inline-grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto auto;
  column-gap:11px;row-gap:4px;color:var(--brand);border:0;text-decoration:none}
.sv-wordmark__pic{display:block;line-height:0;grid-column:1;grid-row:1/-1;align-self:center}
.sv-wordmark__mark{width:44px;height:44px;display:block;
  grid-column:1;grid-row:1/-1;align-self:center}
.sv-wordmark__pic .sv-wordmark__mark{grid-column:auto;grid-row:auto}
/* The plateless mark is the bare monogram, so it cannot borrow the plate's 44px of
   presence — sized like the plated one it reads as a small floating glyph, indented
   from the column edge by the plate's old padding.
   Instead it locks to the rule. mark-white.svg is cropped to its ink, in which the
   bar is the bottom 12.4% of the box, so at 24.2px tall the bar renders exactly 3px —
   the wordmark rule's own height. Spanning rows 1-2 and ending flush with the rule
   row puts the two on one line whatever the name does, so a wrapped name or tagline
   cannot pull the mark off it. */
.sv-wordmark__mark--bare{width:34.5px;height:24.2px;grid-row:1/3;align-self:end}
.sv-wordmark__type{display:contents}
.sv-wordmark__name{grid-column:2;grid-row:1}
.sv-wordmark__rule{grid-column:2;grid-row:2}
.sv-wordmark__tagline{grid-column:2;grid-row:3}
.sv-wordmark:hover{color:var(--brand);text-decoration:none}
.sv-wordmark__name{font-family:var(--font-display);font-style:italic;font-weight:900;
  font-stretch:87%;font-size:26px;line-height:.9;letter-spacing:-.015em;text-transform:uppercase}
.sv-wordmark__rule{height:3px;background:currentColor}
/* The lockup wraps rather than pushing the page wider than the screen. Each service
   stays on one line; only the gaps between them break. */
.sv-wordmark__tagline{display:flex;flex-wrap:wrap;gap:2px 8.84px;font-family:var(--font-display);
  font-style:italic;font-weight:700;font-stretch:82%;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase}
.sv-wordmark__tagline span{display:flex;gap:8.84px;align-items:center;white-space:nowrap}
.sv-wordmark__sep{opacity:.55}
.sv-wordmark--inverse{color:var(--cream-100)}
.sv-wordmark--inverse:hover{color:var(--cream-100)}

/* ==========================================================================
   Button  —  components/core/Button.jsx
   ========================================================================== */
.sv-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:var(--control-h-md);padding:0 20px;border-radius:var(--radius-sm);
  font-family:var(--font-display);font-style:italic;font-weight:700;font-stretch:85%;
  font-size:var(--text-sm);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.sv-btn:hover{text-decoration:none}
.sv-btn:active{transform:scale(var(--press-scale))}
.sv-btn[disabled]{cursor:not-allowed;opacity:.42}

.sv-btn--sm{height:var(--control-h-sm);padding:0 14px;font-size:var(--text-xs)}
.sv-btn--lg{height:var(--control-h-lg);padding:0 28px;font-size:var(--text-base)}

.sv-btn--primary{background:var(--brand);color:var(--text-on-brand);border:1px solid var(--brand)}
.sv-btn--primary:hover{background:var(--green-600);color:var(--text-on-brand)}

.sv-btn--secondary{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.sv-btn--secondary:hover{background:var(--cream-200);color:var(--brand)}

.sv-btn--accent{background:var(--accent);color:var(--text-on-accent);border:1px solid var(--accent)}
.sv-btn--accent:hover{background:var(--accent-hover);color:var(--text-on-accent)}

.sv-btn--ghost{background:transparent;color:var(--brand);border:1px solid transparent}
.sv-btn--ghost:hover{background:var(--cream-200);color:var(--brand)}

.sv-btn--inverse{background:var(--cream-100);color:var(--green-900);border:1px solid var(--cream-100)}
.sv-btn--inverse:hover{background:var(--cream-50);color:var(--green-900)}

.sv-btn__icon{display:inline-flex;width:16px;height:16px;flex:0 0 auto}
.sv-btn--lg .sv-btn__icon{width:20px;height:20px}
.sv-btn__icon svg{width:100%;height:100%;display:block}

/* ==========================================================================
   Card  —  components/core/Card.jsx
   ========================================================================== */
.sv-card{border-radius:var(--radius-md);padding:var(--space-6);
  transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.sv-card--default{background:var(--surface-card);border:1px solid var(--border-hairline);
  box-shadow:var(--shadow-hairline)}
.sv-card--sunken{background:var(--surface-sunken);border:1px solid var(--border-hairline);box-shadow:none}
.sv-card--outline{background:transparent;border:1px solid var(--border-strong);box-shadow:none}
.sv-card--inverse{background:var(--surface-inverse);border:1px solid var(--green-800);
  color:var(--cream-100);box-shadow:none}
.sv-card--interactive{cursor:pointer}
.sv-card--interactive:hover{transform:translateY(-2px)}
.sv-card--default.sv-card--interactive:hover{box-shadow:var(--shadow-lift)}
.sv-card--outline.sv-card--interactive:hover{box-shadow:var(--shadow-block)}

/* ==========================================================================
   SectionHeading  —  components/brand/SectionHeading.jsx
   ========================================================================== */
.sv-heading{display:flex;flex-direction:column;gap:var(--space-3);text-align:left;
  align-items:flex-start;max-width:46ch}
.sv-heading__eyebrow{font-family:var(--font-display);font-style:italic;font-weight:700;
  font-stretch:82%;font-size:var(--label-size);letter-spacing:var(--label-tracking);
  text-transform:uppercase;color:var(--brand)}
.sv-heading__rule{width:64px;height:var(--rule-w);background:var(--brand)}
.sv-heading__title{font-size:var(--text-4xl);color:var(--text-heading)}
.sv-heading__lead{font-size:var(--text-lg);line-height:var(--leading-normal);color:var(--text-muted)}

/* ==========================================================================
   Forms  —  components/forms/{Field,Input,Select,Textarea}.jsx
   ========================================================================== */
.sv-field{display:flex;flex-direction:column;gap:var(--space-2)}
.sv-field__label{font-family:var(--font-display);font-style:italic;font-weight:700;
  font-stretch:82%;font-size:12px;letter-spacing:var(--label-tracking);text-transform:uppercase;
  color:var(--brand)}
.sv-field__label .sv-req{color:var(--status-danger)}
.sv-field__hint{font-size:var(--text-xs);color:var(--text-muted)}
.sv-field__hint--error{color:var(--status-danger)}

.sv-input,.sv-select__el,.sv-textarea{width:100%;height:var(--control-h-md);
  padding:0 var(--space-3);background:var(--surface-raised);color:var(--text-body);
  border:1px solid var(--border-muted);border-radius:var(--radius-sm);outline:none;
  font-family:var(--font-text);font-size:var(--text-base);
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.sv-input:focus,.sv-select__el:focus,.sv-textarea:focus{border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(14,81,50,.14)}
.sv-input[aria-invalid="true"],.sv-select__el[aria-invalid="true"],.sv-textarea[aria-invalid="true"]{
  border-color:var(--status-danger)}
.sv-textarea{height:auto;padding:var(--space-3);line-height:var(--leading-normal);resize:vertical}

.sv-select{position:relative;width:100%}
.sv-select__el{appearance:none;-webkit-appearance:none;padding-right:var(--space-10);cursor:pointer}
.sv-select__chevron{position:absolute;right:14px;top:50%;transform:translateY(-60%) rotate(45deg);
  width:7px;height:7px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  pointer-events:none}

/* ==========================================================================
   Header
   ========================================================================== */
.sv-header{position:sticky;top:0;z-index:50;background:var(--surface-page);
  border-bottom:2px solid var(--brand);
  box-shadow:0 1px 0 rgba(6,43,26,.14),0 10px 24px rgba(6,43,26,.06)}
.sv-header__inner{display:flex;align-items:center;gap:32px;max-width:1200px;margin:0 auto;
  padding:14px var(--gutter)}
.sv-nav{display:flex;gap:24px;margin-left:auto;font-family:var(--font-display);font-style:italic;
  font-weight:700;font-stretch:84%;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.sv-nav a{color:var(--text-muted);border-bottom:0}
.sv-nav a:hover{color:var(--brand);text-decoration:none}
.sv-nav a[aria-current="page"]{color:var(--brand);border-bottom:3px solid var(--brand);padding-bottom:3px}
/* The header CTA is hidden on small screens, so the nav panel carries its own. */
.sv-nav__cta{display:none}

/* Mobile nav toggle — the artboard is a desktop canvas and has no small-screen
   treatment; this is an addition, kept inside the system's own control specs. */
.sv-navtoggle{display:none;align-items:center;justify-content:center;margin-left:auto;
  width:var(--control-h-sm);height:var(--control-h-sm);padding:0;background:transparent;
  border:1px solid var(--brand);border-radius:var(--radius-sm);color:var(--brand);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard)}
.sv-navtoggle:hover{background:var(--cream-200)}
.sv-navtoggle svg{width:20px;height:20px;display:block}
/* Both icons live in the button; specificity here must beat `.sv-navtoggle svg`
   (0,1,1), so these selectors are two classes deep rather than one. */
.sv-navtoggle .sv-navtoggle__close{display:none}
.sv-navtoggle[aria-expanded="true"] .sv-navtoggle__open{display:none}
.sv-navtoggle[aria-expanded="true"] .sv-navtoggle__close{display:block}

/* ==========================================================================
   Hero
   ========================================================================== */
.sv-hero{background:var(--green-900);color:var(--cream-100)}
/* One column while the site photo is out of the page. Restore the two-track version
   below when it comes back:
     grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;
   The copy keeps the width it had in the 1.15fr track rather than running the full
   1200 — a 76px headline set across the whole container reads as a stretched banner,
   and the lead's own 44ch cap would leave it stranded under a much wider title. */
.sv-hero__inner{max-width:1200px;margin:0 auto;padding:80px var(--gutter);display:grid;
  grid-template-columns:minmax(0,1fr);align-items:center}
.sv-hero__copy{display:flex;flex-direction:column;gap:24px;max-width:660px}
.sv-hero__eyebrow{font-family:var(--font-display);font-style:italic;font-weight:700;
  font-stretch:82%;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-100)}
.sv-hero__title{font-family:var(--font-display);font-style:italic;font-weight:900;font-stretch:87%;
  font-size:clamp(40px,5.6vw,76px);line-height:1.02;letter-spacing:-.015em;text-transform:uppercase;
  color:var(--cream-100);margin:0}
/* The geography sits inside the H1 so the heading carries it, but set as a
   subordinate line: at display size the extra words took the headline from
   three lines to five and swallowed the hero. Mono/13px/.16em is the eyebrow's
   own treatment, so the two read as a pair bracketing the headline. */
.sv-hero__region{display:block;margin-top:14px;font-family:var(--font-mono);font-style:normal;font-weight:400;font-stretch:100%;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-200)}
.sv-hero__sep{opacity:.55}
.sv-hero__lead{font-size:18px;line-height:1.55;max-width:44ch;color:var(--green-200);margin:0}
.sv-hero__actions{display:flex;gap:12px;flex-wrap:wrap}
/* Unused while the hero's site photo is out of the page — kept so restoring it is a
   markup change only. This is the frame the real <img> goes in. */
.sv-hero__media{aspect-ratio:4/3;border-radius:3px;border:1px solid rgba(244,250,246,.22);
  background:repeating-linear-gradient(135deg,rgba(244,250,246,.10) 0 12px,rgba(244,250,246,.05) 12px 24px);
  overflow:hidden}

/* Image slots — a missing photo must read as missing, not as decoration. */
.sv-slot{width:100%;height:100%;display:grid;place-items:center;padding:var(--space-4);
  text-align:center;font-family:var(--font-display);font-style:italic;font-weight:700;
  font-stretch:82%;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.sv-slot--on-green{color:rgba(244,250,246,.62)}  /* hero photo only — see above */
.sv-slot--cream{color:var(--steel-600);
  background:repeating-linear-gradient(45deg,var(--cream-200) 0 10px,var(--surface-card) 10px 20px)}

/* ==========================================================================
   Sections
   ========================================================================== */
.sv-section{background:var(--surface-page);padding:var(--section-y) 0}
.sv-section--hairline{border-bottom:1px solid var(--border-hairline)}
.sv-section__inner{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.sv-grid{display:grid;gap:16px;margin-top:40px}
.sv-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sv-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.sv-grid--steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}

/* Fleet cards */
.sv-machine{display:flex;flex-direction:column;border:1px solid var(--border-hairline);
  border-radius:3px;overflow:hidden}
.sv-machine__figure{aspect-ratio:4/3;background:#FFFFFF;display:grid;place-items:center;
  padding:16px;min-height:0;overflow:hidden}
.sv-machine__figure img{width:100%;height:100%;object-fit:contain;display:block}
.sv-machine__body{padding:20px;border-top:1px solid var(--border-hairline);display:flex;
  flex-direction:column;gap:8px}
.sv-machine__title{font-family:var(--font-display);font-style:italic;font-weight:900;
  font-stretch:87%;font-size:19px;line-height:1.2;min-height:2.4em;text-transform:uppercase;
  color:var(--text-heading);margin:0}
.sv-machine__note{font-size:14px;color:var(--text-muted);margin:0}

/* Service cards */
.sv-service__title{font-family:var(--font-display);font-style:italic;font-weight:900;
  font-stretch:87%;font-size:21px;text-transform:uppercase;color:var(--text-heading);margin:0}
.sv-service__note{font-size:14px;color:var(--text-muted);margin:12px 0 0}

/* Materials */
.sv-material{background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:3px;padding:24px;display:flex;flex-direction:column;gap:10px}
.sv-material__media{aspect-ratio:4/3;border:1px solid var(--border-hairline);border-radius:3px;
  overflow:hidden}
.sv-material__title{font-family:var(--font-display);font-style:italic;font-weight:900;
  font-stretch:87%;font-size:19px;line-height:1.2;min-height:3.6em;text-transform:uppercase;
  color:var(--text-heading);margin:0}
.sv-material__note{font-size:14px;color:var(--text-muted);margin:0}

/* Process steps */
.sv-step{display:flex;flex-direction:column;gap:16px}
.sv-step__rule{width:100%;height:6px;background:var(--brand)}
.sv-step__num{font-family:var(--font-mono);font-size:13px;color:var(--text-muted)}
.sv-step__title{font-family:var(--font-display);font-style:italic;font-weight:900;font-stretch:87%;
  font-size:20px;text-transform:uppercase;color:var(--text-heading);margin:0}
.sv-step__note{font-size:14px;color:var(--text-muted);margin:0}

/* ==========================================================================
   Quote section
   ========================================================================== */
.sv-quote{padding:var(--section-y) 0 112px}
.sv-quote__inner{max-width:1200px;margin:0 auto;padding:0 var(--gutter);display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.sv-quote__aside{display:flex;flex-direction:column;gap:24px;min-width:0}
.sv-contact{display:grid;border-top:1px solid var(--border-hairline)}
.sv-contact__row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:14px 0;border-bottom:1px solid var(--border-hairline)}
.sv-contact__key{font-family:var(--font-display);font-style:italic;font-weight:700;font-stretch:82%;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);flex:0 0 auto}
.sv-contact__val{font-size:15px;color:var(--text-heading);text-align:right;
  overflow-wrap:anywhere}
.sv-contact__val--mono{font-family:var(--font-mono)}
.sv-contact__val a{color:var(--text-heading);border-bottom:1px solid var(--border-hairline);
  display:inline-flex;align-items:center;min-height:24px}
.sv-contact__val a:hover{color:var(--green-500)}

.sv-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;background:var(--surface-card);
  border:1px solid var(--border-hairline);border-radius:3px;padding:32px}
.sv-form__wide{grid-column:1/-1}
.sv-form__foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-top:24px;border-top:1px solid var(--border-hairline);flex-wrap:wrap}
.sv-form__note{font-size:14px;color:var(--text-muted)}
.sv-form__status{grid-column:1/-1;margin:0;font-size:15px;padding:14px 16px;border-radius:var(--radius-sm)}
.sv-form__status[hidden]{display:none}
.sv-form__status--ok{background:var(--green-100);color:var(--green-900);
  border-left:var(--rule-w) solid var(--brand)}
.sv-form__status--err{background:var(--rust-100);color:var(--rust-600);
  border-left:var(--rule-w) solid var(--status-danger)}

/* ==========================================================================
   Footer
   ========================================================================== */
.sv-footer{background:var(--green-900);color:var(--cream-100);padding:64px 0 40px}
.sv-footer__inner{max-width:1200px;margin:0 auto;padding:0 var(--gutter);display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:48px}
.sv-footer__brand{display:flex;flex-direction:column;gap:20px}
.sv-footer__blurb{font-size:14px;line-height:1.55;color:var(--green-200);margin:0;max-width:34ch}
.sv-footer__col{display:flex;flex-direction:column;gap:14px}
.sv-footer__head{font-family:var(--font-display);font-style:italic;font-weight:700;font-stretch:82%;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.sv-footer__col a{font-size:14px;color:var(--green-200);display:inline-flex;
  align-items:center;min-height:24px}
.sv-footer__line{font-family:var(--font-mono);font-size:14px;color:var(--cream-100);
  overflow-wrap:anywhere}
.sv-footer__line a{font-family:var(--font-mono);font-size:14px;color:var(--cream-100);
  display:inline-flex;align-items:center;min-height:24px}
.sv-footer__addr{font-size:14px;color:var(--green-200)}
.sv-footer__legal{max-width:1200px;margin:40px auto 0;padding:24px var(--gutter) 0;
  border-top:1px solid rgba(244,250,246,.18);display:flex;justify-content:space-between;gap:24px;
  font-size:13px;color:var(--green-200);flex-wrap:wrap}
.sv-footer__gstin{font-family:var(--font-mono)}

/* ==========================================================================
   Responsive.  The artboard is a fixed 1200px desktop canvas with no
   breakpoints of its own — everything below is an addition, laid out on the
   system's own 4px scale and 24px gutter.
   ========================================================================== */
/* The nav collapses on its own schedule, wider than the layout breakpoint below:
   with the mark added, the lockup plus five nav items plus the CTA need 976px of the
   1200 container, so the toggle takes over at 1100 — below that the tagline wraps and
   the header jumps from 78px to 94px. Measured, not guessed. */
@media (max-width:1100px){
  .sv-nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;gap:0;
    margin-left:0;background:var(--surface-page);border-bottom:2px solid var(--brand);
    box-shadow:0 10px 24px rgba(6,43,26,.10);padding:var(--space-2) var(--gutter) var(--space-4)}
  .sv-nav[data-open="true"]{display:flex}
  .sv-nav a{padding:14px 0;border-bottom:1px solid var(--border-hairline)}
  .sv-nav a[aria-current="page"]{border-bottom:1px solid var(--border-hairline);padding-bottom:14px}
  .sv-nav .sv-nav__cta{display:flex;margin-top:var(--space-4);border-bottom:0;
    color:var(--text-on-brand);padding:0 20px}
  .sv-nav .sv-nav__cta:hover{color:var(--text-on-brand)}
  .sv-navtoggle{display:inline-flex}
  .sv-header__inner{position:relative;gap:16px}
  .sv-header__cta{display:none}
}

@media (max-width:1080px){
  .sv-grid--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sv-material__title{min-height:2.4em}
  .sv-footer__inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
}

@media (max-width:900px){
  /* The single column and its gap are the base rule's job while the site photo is
     out; only the padding still changes here. Both come back when it does. */
  .sv-hero__inner{padding:64px var(--gutter)}
  .sv-grid--4,.sv-grid--steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-quote__inner{grid-template-columns:minmax(0,1fr);gap:40px}
  .sv-section,.sv-quote{padding-top:var(--section-y-sm);padding-bottom:var(--section-y-sm)}
}

@media (max-width:680px){
  .sv-grid--5{grid-template-columns:minmax(0,1fr)}
  .sv-machine__title,.sv-material__title{min-height:0}
  .sv-form{grid-template-columns:minmax(0,1fr);padding:24px}
  .sv-footer__inner{grid-template-columns:minmax(0,1fr);gap:32px}
  .sv-hero__actions .sv-btn{flex:1 1 100%}
  .sv-contact__row{flex-direction:column;align-items:flex-start;gap:4px}
  .sv-contact__val{text-align:left}
}

/* Below this the tagline no longer fits beside the mark and the header grows from
   78px to 134px. The Wordmark component supports a taglineless lockup, so the header
   uses it here; the full tagline still runs in the hero eyebrow and the footer. */
@media (max-width:480px){
  .sv-header .sv-wordmark__tagline{display:none}
}

@media (max-width:460px){
  .sv-grid--4,.sv-grid--steps{grid-template-columns:minmax(0,1fr)}
  /* The large buttons' own min-content width is the last thing wider than a 280px
     screen (Galaxy Fold cover display), so they step down a size there. */
  .sv-btn--lg{padding:0 14px;font-size:var(--text-sm)}
}

@media (max-width:360px){
  /* At 320 the name needs 163px and the column offers exactly 163 — it wrapped on a
     sub-pixel. Smaller mark and name give it real headroom instead of a hairline. */
  /* column-gap, not gap — the lockup is a grid now and the shorthand would widen
     the 4px rows between name, rule and tagline too. */
  .sv-header .sv-wordmark{column-gap:8px}
  .sv-header .sv-wordmark__mark{width:32px;height:32px}
  .sv-header .sv-wordmark__name{font-size:19px}
}