/* ==========================================================================
   Contact page — reference/halston/contact.css, spec §4.

   Every rule body below is Halston's. Two mechanical substitutions were made
   and nothing else:

   1. TOKENS ARE INLINED. Halston ships a four-deep var() chain; we resolved
      each one against reference/halston/tokens.css and wrote the literal.
      The ones that carry the layout, for spot-checking:

        nav-size ................ 3rem
        space-2xsmall ........... clamp(.125rem,.1rem + .125vw,.25rem)
        space-xsmall ............ clamp(.25rem,.2rem + .25vw,.5rem)
        space-small ............. clamp(.5rem,.45rem + .25vw,.75rem)
        space-medium ............ clamp(.75rem,.7rem + .25vw,1rem)
        space-large ............. clamp(1rem,.9rem + .5vw,1.5rem)
        space-xlarge ............ clamp(1.25rem,1.1rem + .75vw,2rem)
        fluid-spacing-small ..... 1.5vw
        fluid-spacing-medium .... 2.5vw
        fluid-spacing-large ..... 5vw
        padding-large ........... clamp(2rem,1.5rem + 6vw,6rem)
        padding-default ......... clamp(2rem,1rem + 4vw,4rem)
        container-padding ....... clamp(.75rem,.7rem + .25vw,1rem)   (= gap-default
        gap-default ............. clamp(.75rem,.7rem + .25vw,1rem)    = spacing-default
        spacing-default ......... clamp(.75rem,.7rem + .25vw,1rem)    = space-medium)
        radius-default .......... 3px
        radius-max .............. 999rem
        col-2 ................... calc((100% - clamp(.75rem,.7rem + .25vw,1rem))/2)
        max-fluid-small ......... clamp(18rem,15.6rem + 12vw,30rem)
        max-fluid-medium ........ clamp(22rem,19.2rem + 14vw,36rem)
        heading-size--medium .... clamp(1.5rem,1.45rem + .25vw,1.75rem)
        heading-size--small ..... clamp(1.125rem,1.075rem + .25vw,1.375rem)
        paragraph-size--large ... clamp(1.125rem,1.1rem + .125vw,1.25rem)
        paragraph-size--medium .. clamp(1rem,.975rem + .125vw,1.125rem)
        paragraph-size--small ... clamp(.9375rem,.9125rem + .125vw,1rem)
        paragraph-size--xsmall .. clamp(.875rem,.8625rem + .0625vw,.9375rem)
        raw-sizes 015/025/05/075/1/125/15/2 = .15/.25/.5/.75/1/1.25/1.5/2 rem

      Note html is 14px here (Senawa's base), so every rem above is ×14.

   2. COLOURS ARE OURS, per the spec §4 table:
        primary-text -> var(--slate)      brand-accent--strong -> var(--walnut)
        brand-accent--base -> var(--sand) light-strong -> var(--linen)
        light-base -> var(--wool)         secondary-base -> var(--slate)
        secondary-strong -> var(--walnut) brand-accent-500 -> var(--sand)
        brand-30 -> rgba(212,201,180,.3)  brand-light-70 -> rgba(246,242,235,.7)
      Tokens the table does not name, extended the same way:
        inverse-text / brand-accent--subtle -> var(--wool)
        dark-base / dark-strong -> var(--slate)
        brand-accent-400 -> var(--sand)   brand-10 -> rgba(212,201,180,.1)
        secondary-subtle (.ml-bg) -> var(--sand)
      Fonts: typography--heading / --label -> var(--font-display) (Sora);
             typography--body-font / primary-font -> var(--font-body) (Inter).

   Three deliberate departures, all called out again at the rule:
     a. Halston spaces form rows with `.field-label{top:2rem}` on a
        position:relative label — that only works next to Webflow's own form
        chrome and here it drops the label straight onto the input. The gap is
        a real `gap` on the <form> instead and the label sits at top:0.
     b. `.cs-title` is align-items:flex-start, not center: the variant it uses
        declares text-align:left and the spec asks for a left-set title.
     c. `.error` hides itself with `:empty` rather than a Webflow display flag.
   ========================================================================== */


/* =========================================================================
   0. SHARED TYPE + HELPERS — the Halston atoms this page is built from
   ========================================================================= */

.heading-bold{z-index:9;font-family:var(--font-display);font-size:clamp(1.5rem,1.45rem + .25vw,1.75rem);line-height:100%;font-weight:500;text-transform:uppercase;letter-spacing:0;margin-top:0;margin-bottom:0;position:relative}
.heading-bold.is-medium{font-size:clamp(1.5rem,1.45rem + .25vw,1.75rem)}
.heading-bold.is-small{font-size:clamp(1.125rem,1.075rem + .25vw,1.375rem)}
.heading-bold.is-xsmall{font-size:clamp(1rem,.975rem + .125vw,1.125rem)}

.paragraph-bold{z-index:9;opacity:.9;font-family:var(--font-body);font-size:clamp(1rem,.975rem + .125vw,1.125rem);line-height:150%;font-weight:500;text-transform:uppercase;margin-top:0;margin-bottom:0;display:block;position:relative}
.paragraph-bold.is-large{font-size:clamp(1.125rem,1.1rem + .125vw,1.25rem)}
.paragraph-bold.is-small{font-size:clamp(.9375rem,.9125rem + .125vw,1rem)}
.paragraph-bold.is-xsmall{font-size:clamp(.875rem,.8625rem + .0625vw,.9375rem)}
.paragraph-bold.is-link{padding-top:clamp(.25rem,.2rem + .25vw,.5rem);padding-bottom:clamp(.25rem,.2rem + .25vw,.5rem);border-top:1px solid transparent;font-size:clamp(.875rem,.8625rem + .0625vw,.9375rem);line-height:150%;transition:color .2s,border-color .2s}
.paragraph-bold.is-link:hover{border-top-color:var(--walnut);color:var(--slate)}

/* Halston's non-bold pair. Sizes from the same token file: .heading is
   heading-size--medium, .paragraph.is-large is paragraph-size--large. */
.heading{z-index:9;font-family:var(--font-display);font-size:clamp(1.5rem,1.45rem + .25vw,1.75rem);line-height:110%;font-weight:500;letter-spacing:-.01em;margin-top:0;margin-bottom:0;position:relative}
.heading.is-medium{font-size:clamp(1.5rem,1.45rem + .25vw,1.75rem)}
.paragraph{font-family:var(--font-body);font-size:clamp(1rem,.975rem + .125vw,1.125rem);line-height:150%;font-weight:400;margin-top:0;margin-bottom:0}
.paragraph.is-large{font-size:clamp(1.125rem,1.1rem + .125vw,1.25rem)}

.lb-text{z-index:9;opacity:.9;font-family:var(--font-display);font-size:clamp(.875rem,.8625rem + .0625vw,.9375rem);line-height:120%;font-weight:400;letter-spacing:-.025rem;text-transform:uppercase;margin-top:0;margin-bottom:0;position:relative}
.lb-text.with-opacity{opacity:.6}
.lb-text.is-small{opacity:.65;font-size:.75rem}
.lb-text.in-label-block{font-size:.75rem}

.lb{z-index:9;padding:clamp(.125rem,.1rem + .125vw,.25rem) clamp(.25rem,.2rem + .25vw,.5rem);grid-column-gap:clamp(.25rem,.2rem + .25vw,.5rem);grid-row-gap:clamp(.25rem,.2rem + .25vw,.5rem);border:1px solid var(--walnut);border-radius:3px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--slate);flex-flow:row;flex:none;justify-content:flex-start;align-items:center;display:flex;position:relative;overflow:hidden}
.lb-dot{width:.25rem;height:.25rem;background-color:var(--sand);border-radius:50%;flex:none}
/* Halston's 51d51728 variant — the pill as it sits over the dark photo. */
.lb.is-inverse{border-color:var(--wool);opacity:.7}
.lb.is-inverse .lb-dot.is-inverse{background-color:var(--wool)}
.lb-text.in-label-block.is-inverse{opacity:1;color:var(--wool)}

.cover-image{z-index:5;object-fit:cover;object-position:50% 50%;width:100%;height:100%;position:absolute;inset:0}

.parallax-wrap{z-index:5;width:100%;height:100%;position:absolute;inset:0%;overflow:hidden}
.parallax-image{object-fit:cover;object-position:50% 25%;width:100%;height:110%;max-width:none;position:absolute;top:-10%;left:0;right:0;will-change:transform}


/* =========================================================================
   1. HERO — Halston .hero-contact*  ->  .hc-*
   ========================================================================= */

/* The hero is linen, not the wool page colour, so the scrolled nav bar
   (site/css/style.css) takes linen here and no seam runs under it. */
:root{--nav-scrolled-bg:var(--linen)}
.hc-hero{z-index:9;width:100%;padding-top:96px;background-color:var(--linen);color:var(--slate);flex-flow:column;justify-content:space-between;align-items:stretch;display:flex;position:relative;overflow:clip}
.hc-layout{z-index:9;width:100%;padding:2.5vw clamp(.75rem,.7rem + .25vw,1rem);grid-row-gap:1.5vw;flex-flow:column;justify-content:flex-start;align-items:flex-start;display:flex;position:relative}
.hc-title{max-width:clamp(18rem,15.6rem + 12vw,30rem);flex-flow:column;justify-content:center;align-items:center;display:flex;position:relative}
.hc-content{z-index:8;grid-column-gap:clamp(.75rem,.7rem + .25vw,1rem);grid-row-gap:clamp(.75rem,.7rem + .25vw,1rem);border-top:1px solid var(--sand);flex-flow:row;justify-content:space-between;align-items:flex-start;width:100%;display:flex;position:relative}
.hc-subtitle{top:clamp(.75rem,.7rem + .25vw,1rem);max-width:clamp(22rem,19.2rem + 14vw,36rem);padding-top:clamp(.5rem,.45rem + .25vw,.75rem);position:sticky}
.hc-actions{flex-flow:column;flex:0 calc((100% - clamp(.75rem,.7rem + .25vw,1rem))/2);grid-column-gap:5vw;grid-row-gap:5vw;justify-content:flex-start;align-items:flex-start;display:flex;position:relative;top:-1px}
.hc-main{width:100%}

.hc-link{z-index:9;grid-column-gap:clamp(.75rem,.7rem + .25vw,1rem);grid-row-gap:clamp(.75rem,.7rem + .25vw,1rem);border-top:1px solid var(--walnut);width:100%;color:var(--slate);flex-flow:row;justify-content:space-between;align-items:flex-start;transition:color .2s;display:flex;position:relative;overflow:hidden}
.hc-link:hover{color:var(--walnut)}
.hc-link-title{min-width:6rem;padding-top:clamp(.5rem,.45rem + .25vw,.75rem)}
.hc-link-text{padding-top:clamp(.5rem,.45rem + .25vw,.75rem);padding-bottom:clamp(1rem,.9rem + .5vw,1.5rem);grid-column-gap:clamp(.75rem,.7rem + .25vw,1rem);grid-row-gap:clamp(.75rem,.7rem + .25vw,1rem);flex-flow:column;justify-content:center;align-items:flex-start;margin-right:auto;display:flex}
/* Halston keeps these two halves in the DOM but never paints them without
   its GSAP hover; display:none is the stylesheet's own value. */
.hc-link-bg{z-index:1;background-color:var(--sand);width:50%;height:100%;display:none;position:absolute;inset:0% auto auto 0%}
.hc-link-bg.is-2nd{inset:0% 0% auto auto}

.hc-team{width:100%}
.hc-team-list{grid-column-gap:clamp(.125rem,.1rem + .125vw,.25rem);grid-row-gap:clamp(.125rem,.1rem + .125vw,.25rem);flex-flow:column;justify-content:flex-start;align-items:flex-start;width:100%;display:flex}
.hc-team-item{width:100%;padding:clamp(.125rem,.1rem + .125vw,.25rem) clamp(.5rem,.45rem + .25vw,.75rem) clamp(.125rem,.1rem + .125vw,.25rem) clamp(.125rem,.1rem + .125vw,.25rem);grid-column-gap:clamp(.75rem,.7rem + .25vw,1rem);grid-row-gap:clamp(.75rem,.7rem + .25vw,1rem);border-radius:3px;background-color:var(--wool);flex-flow:row;justify-content:flex-start;align-items:flex-start;display:flex;overflow:hidden}
.hc-team-image{border-radius:3px;width:6rem;height:6rem;flex:none;position:relative;overflow:hidden}
.hc-team-content{flex-flow:column;flex:1;justify-content:flex-end;align-self:stretch;align-items:flex-start;display:flex;min-width:0}
.hc-team-divider{width:100%;height:1px;margin-top:clamp(.25rem,.2rem + .25vw,.5rem);background-color:var(--sand)}
.hc-team-block{justify-content:space-between;align-items:center;width:100%;display:flex;gap:clamp(.5rem,.45rem + .25vw,.75rem)}
.hc-links{z-index:9;grid-column-gap:1.5vw;grid-row-gap:clamp(.125rem,.1rem + .125vw,.25rem);flex-flow:wrap;justify-content:flex-end;align-items:center;display:flex;position:relative;top:-1px}


/* =========================================================================
   2. CONSULTATION / FORM — .section-consultation -> .cs-section
   The page only ever uses variant 7bc8b83a, so its overrides are folded
   straight into the base rules rather than carried as a second class.
   ========================================================================= */

.cs-section{z-index:9;background-color:var(--slate);width:100%;max-width:100vw;min-height:auto;color:var(--wool);justify-content:center;align-items:center;display:flex;position:relative;overflow:clip}
.cs-wrap{z-index:9;width:100%;padding:clamp(.75rem,.7rem + .25vw,1rem);grid-column-gap:clamp(.75rem,.7rem + .25vw,1rem);grid-row-gap:clamp(.75rem,.7rem + .25vw,1rem);flex-flow:row;justify-content:space-between;align-items:stretch;display:flex;position:relative}

/* variant: align-self:stretch; height:auto; position:relative */
.cs-content{z-index:9;height:auto;padding:clamp(2rem,1rem + 4vw,4rem) clamp(1.25rem,1.1rem + .75vw,2rem);flex:0 calc((100% - clamp(.75rem,.7rem + .25vw,1rem))/2);border-radius:3px;text-align:left;justify-content:center;align-self:stretch;align-items:center;display:flex;position:relative;overflow:clip}

/* variant: sticky at space-medium, text-align:left. Departure (b): the base
   rule's align-items:center is flex-start here so the left-set title the
   spec asks for actually sets left. */
.cs-title{top:clamp(.75rem,.7rem + .25vw,1rem);text-align:left;position:sticky;flex-flow:column;justify-content:center;align-items:flex-start;width:100%;display:flex}
.cs-label{margin-bottom:clamp(1.25rem,1.1rem + .75vw,2rem)}
.heading-cta{z-index:9;max-width:30vw;font-family:var(--font-display);font-size:4vw;line-height:100%;font-weight:500;text-align:left;letter-spacing:-.25vw;text-transform:uppercase;margin-top:0;margin-bottom:0;position:relative}

/* variant: min-height:auto; padding: padding-large fluid-spacing-medium; margin-top:0 */
.cs-form{z-index:9;max-width:50vw;min-height:auto;padding:clamp(2rem,1.5rem + 6vw,6rem) 2.5vw;border-radius:3px;background-color:rgba(246,242,235,.7);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--slate);flex:1;justify-content:center;align-items:center;margin-top:0;margin-left:auto;display:flex;position:relative;overflow:clip}

.cs-bg{z-index:3;position:absolute;inset:0%}
.cs-sticky-bg{height:100vh;position:sticky;top:0}
.cs-bg-overlay{z-index:9;background-color:var(--slate);opacity:.3;mix-blend-mode:multiply;position:absolute;inset:0%}


/* --------------------------------------------------------------- the form */

.the-form{width:100%;font-family:var(--font-body);margin-bottom:0}
/* Departure (a): the row rhythm Halston gets from `.field-label{top:2rem}`
   plus Webflow's form chrome is a real gap here (space-xlarge). */
.the-form form{display:flex;flex-direction:column;gap:clamp(1.25rem,1.1rem + .75vw,2rem);width:100%}
.the-form form[hidden]{display:none}
/* FormSubmit's honeypot. Off-canvas, never focused by a person. */
.the-form .hp{position:absolute;left:-9999px}

.form-field-wrap{flex-direction:column;justify-content:flex-end;align-self:stretch;align-items:flex-start;width:100%;display:flex;position:relative}
.form-field-wrap.is-radio{padding-top:clamp(.5rem,.45rem + .25vw,.75rem);padding-bottom:clamp(.5rem,.45rem + .25vw,.75rem)}

.field-label{top:0;z-index:1;margin-bottom:.15rem;color:var(--walnut);font-family:var(--font-body);font-size:1.5rem;font-weight:400;line-height:1.5;position:relative}
.field-label.is-2nd{color:var(--slate);margin-bottom:.5rem;top:0}

.field{z-index:2;aspect-ratio:auto;border-style:solid;border-width:0 0 1px;border-color:transparent transparent var(--walnut);width:100%;min-width:100%;max-width:100%;height:3rem;min-height:3rem;max-height:6rem;color:var(--slate);font-family:var(--font-body);font-size:clamp(1.125rem,1.1rem + .125vw,1.25rem);background-color:#0000;border-radius:0;margin-bottom:0;padding:0;line-height:1.2;transition:border-color .2s;position:relative;display:block}
.field:focus{border-bottom-color:var(--walnut);outline:none}
.field:focus-visible{border-bottom-width:2px}
.field.message{height:7rem;min-height:7rem;max-height:10rem;font-size:1.25rem;line-height:1.2;overflow:auto;resize:vertical}
.field::placeholder{color:var(--oak)}
.form-field-wrap.has-error .field{border-bottom-color:#d92d20}

/* Pill radios ------------------------------------------------------------ */
.tab-form-wrap{grid-column-gap:clamp(.125rem,.1rem + .125vw,.25rem);grid-row-gap:clamp(.125rem,.1rem + .125vw,.25rem);flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;display:flex}
.tab-form-field{margin-bottom:0;padding:.75em 1.15rem .65em;position:relative;cursor:pointer;display:inline-flex;align-items:center}
.tab-form-button{z-index:2;border:1px solid var(--sand);border-radius:999rem;background-color:rgba(212,201,180,.3);cursor:pointer;width:100%;height:100%;margin-top:0;margin-left:0;transition:background-color .1s,border-color .1s;position:absolute;inset:0%}
.tab-form-field:hover .tab-form-button{border-color:var(--walnut);background-color:var(--sand)}
.tab-form-field:has(input:checked) .tab-form-button{border-width:1px;border-color:var(--walnut);background-color:var(--sand)}
.tab-form-field:has(input:focus-visible) .tab-form-button{border-color:var(--walnut);outline:2px solid var(--walnut);outline-offset:2px}

/* Consent box ------------------------------------------------------------ */
.radio_wrap{grid-column-gap:4px;grid-row-gap:4px;flex-flow:column;justify-content:flex-start;align-items:flex-start;display:flex}
.radio-field{justify-content:flex-start;align-items:center;margin-top:.4em;margin-right:0;padding:0;display:flex;position:relative;cursor:pointer}
.radio-button{z-index:2;width:1.25rem;height:1.25rem;border:1px solid var(--walnut);border-radius:50%;background-color:rgba(212,201,180,.1);cursor:pointer;flex:none;margin-top:0;margin-left:0;margin-right:8px;transition:background-color .1s,border-width .1s,border-color .1s}
.radio-field:hover .radio-button{border-color:var(--walnut);background-color:var(--sand)}
.radio-field:has(input:checked) .radio-button{border-width:4px;border-color:var(--walnut);background-color:var(--sand)}
.radio-field:has(input:focus-visible) .radio-button{border-color:var(--walnut);outline:2px solid var(--walnut);outline-offset:2px}

.radio-label{z-index:3;pointer-events:none;margin-bottom:0;font-size:1.15rem;font-weight:400;line-height:1;position:relative}

/* The real inputs stay in the tab order and keep their semantics; only the
   painted box is ours. Covering the label keeps the hit area honest. */
.tab-form-field input,.radio-field input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:4}

/* Submit + messages ------------------------------------------------------ */
.button-form-wrap{z-index:9;margin-top:clamp(.75rem,.7rem + .25vw,1rem);grid-column-gap:clamp(.75rem,.7rem + .25vw,1rem);grid-row-gap:clamp(.75rem,.7rem + .25vw,1rem);justify-content:flex-start;align-items:center;display:flex;position:relative}
.form-submit-button{z-index:99;padding:1rem 1.5rem;border:0;border-radius:3px;background-color:var(--slate);font-family:var(--font-body);color:var(--wool);font-size:1rem;letter-spacing:.06em;text-align:center;text-transform:uppercase;font-weight:500;cursor:pointer;transition:background-color .2s;position:relative}
.form-submit-button:hover{background-color:var(--walnut)}

/* Departure (c): empty means silent. */
.error{color:#d92d20;width:100%;min-width:100%;padding-top:4px;font-family:var(--font-body);font-size:clamp(.875rem,.8625rem + .0625vw,.9375rem);font-weight:400;line-height:1.4;display:block}
.error:empty{display:none}

.success-message{padding:clamp(2rem,1.5rem + 6vw,6rem) clamp(.75rem,.7rem + .25vw,1rem);border-radius:3px;background-color:#24690a;color:var(--wool);text-align:center}
.error-message{margin-top:clamp(.75rem,.7rem + .25vw,1rem);padding:clamp(.75rem,.7rem + .25vw,1rem);border-radius:3px;background-color:#eb2c2f;color:var(--slate);text-align:center}
.success-message .lb-text,.error-message .lb-text{opacity:1}


/* =========================================================================
   3. LOCATIONS — .locations-row-… and .location-…  ->  .loc-…
   ========================================================================= */

.loc-row{z-index:9;width:100%;max-width:100vw;padding:clamp(.75rem,.7rem + .25vw,1rem);background-color:var(--wool);position:relative;overflow:clip}
.loc-wrap{width:100%}
.loc-list{grid-column-gap:clamp(.75rem,.7rem + .25vw,1rem);grid-row-gap:clamp(.75rem,.7rem + .25vw,1rem);flex-flow:column;display:flex}
.loc-item{z-index:9;width:100%;height:45vh;min-height:30rem;padding:clamp(.75rem,.7rem + .25vw,1rem);grid-column-gap:clamp(.75rem,.7rem + .25vw,1rem);grid-row-gap:clamp(.75rem,.7rem + .25vw,1rem);border-radius:3px;color:var(--wool);flex-flow:row;justify-content:space-between;align-items:flex-end;display:flex;position:relative;overflow:clip}
.loc-bg{z-index:3;border-radius:3px;position:absolute;inset:0%;overflow:hidden}
.loc-gradient{z-index:8;background-image:linear-gradient(0deg,var(--slate) 15%,transparent 50%);opacity:.7;mix-blend-mode:multiply;position:absolute;inset:0%}

.loc-link-block{z-index:9;grid-column-gap:clamp(.75rem,.7rem + .25vw,1rem);grid-row-gap:clamp(.75rem,.7rem + .25vw,1rem);color:var(--wool);flex-flow:row;justify-content:flex-start;align-items:center;display:flex;position:relative}
.loc-address{flex-flow:column;justify-content:flex-start;align-items:flex-start;display:flex}
.loc-opening{grid-column-gap:clamp(.75rem,.7rem + .25vw,1rem);flex-flow:column;justify-content:flex-start;align-items:flex-start;display:flex;position:relative;z-index:9}

.ml-block{z-index:9;padding:clamp(.25rem,.2rem + .25vw,.5rem) clamp(.75rem,.7rem + .25vw,1rem);grid-column-gap:clamp(.75rem,.7rem + .25vw,1rem);grid-row-gap:clamp(.75rem,.7rem + .25vw,1rem);border-radius:3px;background-color:var(--wool);color:var(--slate);flex-flow:row;justify-content:flex-start;align-items:center;display:flex;position:relative;overflow:hidden}
.ml-icon{z-index:5;width:2rem;height:2rem;font-family:var(--font-body);font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;position:relative}
.ml-bg{z-index:1;background-color:var(--sand);opacity:0;pointer-events:none;position:absolute;inset:0%;transition:opacity .3s var(--ease-out)}
.ml-block:hover .ml-bg{opacity:1}


/* =========================================================================
   4. BREAKPOINTS — Halston's own: the form stacks under 991px.
   ========================================================================= */

@media (max-width:991px){
  .hc-content{flex-flow:column}
  .hc-title{max-width:100%;align-items:flex-start}
  .hc-subtitle{position:relative;top:auto;max-width:100%}
  .hc-actions{flex:0 100%;width:100%;grid-row-gap:2.5vw}
  .hc-links{justify-content:flex-start}

  .cs-wrap{flex-flow:column}
  .cs-content{flex:0 100%;width:100%;padding:clamp(2rem,1rem + 4vw,4rem) 0}
  .cs-title{position:relative;top:auto}
  .cs-form{max-width:none;width:100%;margin-left:0;padding:clamp(2rem,1.5rem + 6vw,6rem) 5vw}
  .heading-cta{font-size:9vw;max-width:100%;letter-spacing:-.5vw}

  .loc-item{flex-flow:column;justify-content:flex-end;align-items:flex-start;height:auto;min-height:26rem}
  .loc-link-block{flex-flow:column;align-items:flex-start}
}

@media (max-width:767px){
  .hc-link{flex-flow:column;grid-row-gap:0}
  .hc-link-title{min-width:0}
  .hc-link-text{padding-top:clamp(.25rem,.2rem + .25vw,.5rem);width:100%;min-width:0;margin-right:0}
  /* The email is 37 characters; at the token size it runs 50px past a 390px
     phone and .hc-link's overflow:hidden would simply eat the end of it. */
  .hc-link-text .heading-bold{max-width:100%;overflow-wrap:anywhere;font-size:clamp(.8125rem,3.5vw,1.375rem)}
  /* Halston stacks this card and runs the image full-bleed because its image
     is a portrait. Ours is the TIC crest standing in for a photograph of
     Victor, and at 390 a full-width 9rem crest reads as a stray logo block —
     so the card keeps its row layout and the mark keeps its 6rem square. */
  .hc-team-item{flex-flow:row}
  .hc-team-image{width:5rem;height:5rem}
  .hc-team-block{flex-flow:column;align-items:flex-start;gap:.5rem}
  .field-label{font-size:1.25rem}
  .cs-form{padding:clamp(2rem,1.5rem + 6vw,6rem) 1.25rem}
}

@media (prefers-reduced-motion:reduce){
  .parallax-image{transform:none !important;transition:none}
  .hc-link,.ml-bg,.form-submit-button,.field{transition:none}
}

/* The fixed nav is 74px tall; Halston's 3rem (42px at our 14px root) put the
   CONTACT heading 4px under it. Clear it properly. */
@media (max-width:767px){.hc-hero{padding-top:80px}}