/* =========================================
   Amaryllis — CONTACT US PAGE
   -----------------------------------------
   Loaded only on the Contact template. style.css remains the base:
   tokens, reset, header/footer and the .reveal / .stagger motion
   system all come from there.

   Figma: the India map is 555 x 627 sitting left, the form column
   roughly 620 wide to its right. Those two figures set the split.
========================================= */

.contact-page {
    /* The green in the banner headline and the two highlighted words
       beneath it. Only appears on this page, so it is scoped here
       rather than added to the global token block. */
    --c-accent: var(--c-brand);
    --c-rule: #46521f;

    --contact-ink: var(--c-ink);
    --contact-body: var(--c-ink);

    /* Form fields are a flat grey fill with no border in the design.
       Figma: #d9d9d9 fill, #747474 placeholder - the placeholder is
       darker than the page's --c-muted. */
    --field-bg: var(--c-line);
    --field-placeholder: #747474;

    /* --card-shadow comes from style.css :root - one definition for
       the whole site. Not redefined here. */

    /* --- TWO insets, and they are different ------------------
     * --contact-inset  banner copy, matching the About page.
     * --contact-row    the map/form row and the location map.
     *
     * Figma: the map/form row spans x84 to x1362 (1278 wide) and the
     * location map is 1280 at x=80 - about an 81px inset either side
     * on a 1440 frame, i.e. 5.63vw. Held as a ratio with NO ceiling
     * and no max-width on the rows: a fixed cap does not bind at 1440
     * but does above it, which stranded white space on a large
     * display.
     *
     * These MUST have separate names. Declaring both as
     * --contact-inset let the banner value silently win.
     * --------------------------------------------------------- */
    --contact-inset: clamp(20px, 3.9vw, 56px);
    --contact-row: max(18px, 5.63vw);
}

/* =========================================
   1. BANNER
========================================= */
.contact-hero {
    position: relative;
    width: 100%;
    /* Figma draws this one 1440 x 692, but every banner on the site is
       now the same height: the window, less the sticky header. */
    height: var(--hero-h);
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #f1f0ec;
}

.contact-hero-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* The lobby photograph is already near-white on the left where the
   copy sits, so this is the lightest of the three page banners —
   just enough to stop the headline thinning out. */
.contact-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.15) 28%,
        rgba(255, 255, 255, 0) 50%
    );
    pointer-events: none;
}

.contact-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--contact-inset);
}

/* Was 460, which is narrower than the headline itself once it is at
   the Figma size — "US" dropped onto a second line. */
.contact-hero-copy {
    max-width: 580px;
}

/* --- Banner type ------------------------------------------------
 * Measured off the Figma frame rather than set by eye. "CONTACT US"
 * spans about 36% of the banner width, left edge to right, which on
 * the 1440 frame puts the headline at roughly 86px — it was capped
 * at 48, which is why the block read small against the photograph.
 *
 * Carried as vw (86 / 14.4 = 5.97) so the relationship to the banner
 * holds at every width instead of only at the cap. If this ever needs
 * adjusting, this is the ONE number to change: divide the Figma font
 * size by 14.4 for the vw figure and put the px value in the ceiling.
 * ------------------------------------------------------------- */
/* READ FROM THE FILE, not estimated. Node I223:5744;17:309 is
   "CONTACT US" at Source Sans Pro w700 96px, lineHeightPx 74, #1f1f1f.
   The previous 86px/w800 was measured by eye off a screenshot and both
   numbers were wrong. w800 mattered: the design uses only 400/600/700
   across all 1401 of its text nodes, so 800 was being synthesised by
   the browser from the 700 face.
   96 / 14.4 = 6.67vw, so the vw term lands on 96px at the 1440 design
   width. line-height 74/96 = 0.77 — tighter than 1, safe only because
   the string is uppercase with no descenders. Every other banner is
   64px against the same 74px line box, i.e. 1.16. */
.contact-hero-copy h1 {
    font-family: var(--font-display);
    font-size: clamp(34px, 6.67vw, 94px);
    font-weight: 700;
    line-height: 0.77;
    /* em rather than px, so the tightening scales with the type
       instead of disappearing at 86px. */
    text-transform: uppercase;
    color: var(--contact-ink);
}

/* "CONTACT" — the first word only. Figma runs the green word first
   and the dark one second. */
.contact-hero-copy h1 em {
    font-style: normal;
    color: var(--c-accent);
}

/* Rule under the headline. Width tracks the headline rather than
   being a fixed pixel value, so it stays proportional as the type
   scales down — Figma runs it to about 15% of the banner. */
.contact-hero-rule {
    display: block;
    width: clamp(150px, 14.9vw, 215px);
    height: 3px;
    margin: 18px 0 15px;
    background: var(--c-rule);
}

/* Figma node I223:5743;27:160: Open Sans w600 24px, lineHeightPx 24,
   #1f1f1f. Was 21px at w500 — and w500 does not exist anywhere in the
   design, so it was resolving to the 400 face. 24 / 14.4 = 1.67vw. */
.contact-hero-copy p {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.67vw, 22px);
    font-weight: 400;
    line-height: 1;
    color: var(--contact-body);
    /* Was 330, which broke the line a word early and pre-empted the
       <br> in the markup. At 470 the break in the field is the one
       that lands. */
    max-width: 470px;
}

/* The two highlighted words in the standfirst */
.contact-hero-copy p .accent {
    color: var(--c-accent);
}

.has-js .contact-hero-copy > * {
    opacity: 0;
    animation: amaryllis-rise 0.9s var(--ease) forwards;
}

.has-js .contact-hero-copy > *:nth-child(1) { animation-delay: 0.15s; }
.has-js .contact-hero-copy > *:nth-child(2) { animation-delay: 0.28s; }
.has-js .contact-hero-copy > *:nth-child(3) { animation-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
    .has-js .contact-hero-copy > * {
        opacity: 1;
        animation: none;
    }
}

/* =========================================
   2. MAP + FORM
========================================= */
.contact-main {
    padding: clamp(38px, 4.5vw, 66px) var(--contact-row) 30px;
    background: var(--c-page);
    overflow-x: clip;
}

/* Figma: the map is 555 wide at x=84 and the form 635 at x=727, so
   the gap is 88 and the row spans 84 → 1362 = 1278. The 620fr and the
   78px gap were approximations. */
.contact-split {
    display: grid;
    grid-template-columns: 555fr 635fr;
    gap: clamp(30px, 6.11vw, 88px);
    align-items: start;
    
}

/* --- India map --- */
/* The pins are positioned in percentages of THIS box, so it has to be
   the positioning context and it has to be exactly the size of the
   artwork — hence the same aspect-ratio as the image inside it. */
/* The two marker colours from the supplied artwork. Deliberately local
   rather than sitewide tokens: they belong to this one illustration,
   its key and its list, not to the theme's palette.

   They sit on the COLUMN, not on .contact-map — the text list is a
   sibling of the map, and custom properties only reach it from a
   shared ancestor. */
.contact-map-col {
    --map-office: #00a651;
    --map-partner: #e0231f;
}

.contact-map {
    position: relative;
    aspect-ratio: 555 / 627;

    /* Labels are sized against the MAP, not the viewport — 22 place
       names on a 390px map need smaller type than the same 22 on a
       560px one, and a vw-based clamp cannot know the difference. */
    container-type: inline-size;
}

.contact-map-art {
    width: 100%;
    height: auto;
    /* Line drawing on white — no radius, no shadow in the design. */
    aspect-ratio: 555 / 627;
    object-fit: contain;
}

/* --- Dealer and distributor pins --- */
.contact-map-pins {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    /* Labels near the edge would otherwise widen the page. */
    overflow: visible;
}

/* left/top from the template put this point exactly on the city, and it
   has NO size of its own — the dot and the label are both positioned
   against it and hang outside it.

   That is the whole trick. Centring the pin itself with a percentage
   translate would centre the dot AND its label as one row, which drags
   the dot half a label's width off the city it marks — the wider the
   place name, the further wrong it goes. */
.contact-map-pin {
    position: absolute;
    width: 0;
    height: 0;
}

/* --- The markers themselves ---
   A red triangle for a dealer or distributor, a green circle for the
   corporate office — the two symbols the supplied map uses, and the
   two its key explains. The shape is drawn here with no positioning,
   so the same class also works inline in the key below. */
.contact-map-mark {
    display: inline-block;
    width: 0.85em;
    height: 0.78em;
    background: var(--map-partner);
    /* Triangle. clip-path rather than the border trick: the element
       keeps a real width and height, so it scales with the label's
       font-size instead of needing four border widths recalculated. */
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.contact-map-mark--office {
    width: 0.8em;
    height: 0.8em;
    background: var(--map-office);
    border-radius: 50%;
    clip-path: none;
}

/* Only inside a pin is the marker positioned; in the key it stays in
   the text flow. A percentage translate is safe here because it is a
   percentage of the MARKER, which is exactly what needs centring. */
.contact-map-pin .contact-map-mark {
    position: absolute;
    transform: translate(-50%, -50%);
}

.contact-map-name {
    position: absolute;
    left: 0.7em;
    transform: translateY(-50%);
    line-height: 1.25;
    color: var(--c-ink);
    white-space: nowrap;
}

/* --- Which way the label hangs off its marker ---
   Four variants, because 22 names on one small map cannot all sit to
   the right without running into each other or off the edge. None of
   them moves the marker. */
.contact-map-pin--left .contact-map-name {
    left: auto;
    right: 0.7em;
}

.contact-map-pin--above .contact-map-name {
    left: 0;
    top: -0.55em;
    transform: translate(-50%, -100%);
}

.contact-map-pin--below .contact-map-name {
    left: 0;
    top: 0.55em;
    transform: translate(-50%, 0);
}

/* --- Key --- */
/* Sits in the empty bottom-right of the artwork, where the supplied
   map puts it. Absolute, so it cannot push the map's own box around. */
.contact-map-key {
    position: absolute;
    /* Clear of the coastline. The Bay of Bengal side of the artwork is
       empty from about 58% across below the Odisha border, which is
       where the supplied map puts the key too. */
    left: 60%;
    top: 67%;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--c-text);
}

.contact-map-key li {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin-bottom: 0.9em;
    white-space: nowrap;
}

/* The pins and the key share one type size, set against the map's own
   width. The artwork labels 22 places on a 578px map at about 9px; the
   ceiling here is 10, since the north-west corner alone carries five
   names inside a fifth of the width and anything larger has Punjab
   running into Uttrakhand. */
.contact-map-pin,
.contact-map-key {
    font-size: clamp(7px, 1.8cqw, 10px);
}

/* --- The same places as text --- */
/* Visually hidden above 576px but still announced, which is what lets
   the scattered labels on the artwork be aria-hidden. The clip-rect
   pattern rather than display:none, because display:none would take it
   out of the accessibility tree too and leave the map with no readable
   content at all. */
.contact-map-list {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Form --- */
/* Figma: Open Sans w600 27.4 / lh 45.7 / #1f1f1f — the BODY font,
   not the display font. */
.contact-form-title {
    font-family: var(--font-body);
    font-size: clamp(19px, 1.9vw, 25px);
    font-weight: 400;
    line-height: 1.67;
    color: var(--contact-ink);
    margin-bottom: 22px;
}

/* --- Submission message ------------------------------------------
 * Shown above the form after a redirect back from the handler. The
 * left rule carries the state, so the two variants differ by colour
 * alone and neither shouts — this sits inside a quiet page and a
 * full red or green panel would be the loudest thing on it.
 * ------------------------------------------------------------- */
.contact-notice {
    padding: 14px 18px;
    margin-bottom: 20px;
    border-left: 3px solid currentColor;
    border-radius: 2px;
    font-size: clamp(13px, 1.15vw, 13px);
    line-height: 1.6;
}

/* focus is moved here by script so the message is announced; the
   ring would read as an error state, and the text is already the
   thing being drawn attention to. */
.contact-notice:focus {
    outline: none;
}

.contact-notice--ok {
    background: #f1f7ea;
    color: #3f6115;
}

.contact-notice--error {
    background: #fbf0ef;
    color: #8a2b21;
}

.contact-form .field-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.contact-form .field-row--single {
    grid-template-columns: 1fr;
}

.contact-field {
    display: flex;
    flex-direction: column;
}

/* One visible label per COLUMN in the design, not per input — "Full
   Name" sits over the First box and nothing sits over Last. The
   second input still needs an accessible name, so it carries a
   visually hidden label rather than none at all. */
/* Figma: Open Sans w400 18.3 / lh 45.7 / #1f1f1f. */
/* Declared together with .label-spacer so the two can never drift.
   The spacer stands in for the missing label over "Last"; if their
   metrics differ, that input sits at a different height from the one
   beside it. Same trap as the Career form. */
.contact-field label,
.contact-field .label-spacer {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(14px, 1.27vw, 16px);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 8px;
}

.contact-field label {
    color: var(--contact-ink);
}

.label-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Spacer keeps the Last / Phone inputs level with the labelled ones
   beside them without faking it through margins. */
/* Metrics come from the shared rule above. Nothing here may set
   font-size, line-height or margin. */
.label-spacer {
    visibility: hidden;
}

.contact-field input,
.contact-field textarea {
    width: 100%;
    padding: 11px 14px;
    background: var(--field-bg);
    border: 1px solid transparent;
    /* Figma: 304 x 33, radius 4.57, #d9d9d9, placeholder 16px. */
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--contact-ink);
    /* 33px is exactly what Figma draws. NOTE: that is below the 44px
       minimum touch target in WCAG 2.5.8 — raise this to 44 if the
       form proves fiddly on a phone. */
    min-height: 33px;
    transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

/* Figma: Frame 39 is 631 x 144. */
.contact-field textarea {
    min-height: 144px;
    resize: vertical;
    line-height: 1.6;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: var(--field-placeholder);
}

/* The fields have no border at rest, so focus has to be visible
   without one appearing to jump — the transparent border above
   reserves the space, this only colours it. */
.contact-field input:focus,
.contact-field textarea:focus {
    outline: none;
    background: #e2e2e2;
    border-color: var(--contact-ink);
}

.contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Figma: the Submit CTA is 631 x 42, radius 4.57, fill #1f1f1f,
       label Source Sans 3 w700 16 / #fdfdfd. Like the Career form,
       this button is the one control using the DISPLAY font. */
    min-height: 42px;
    margin-top: 4px;
    padding: 13px 20px;
    background: var(--c-ink);
    border: 1px solid var(--c-ink);
    border-radius: 5px;
    color: var(--c-page);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 0.35s var(--ease-out),
        border-color 0.35s var(--ease-out),
        color 0.35s var(--ease-out);
}

/* Every hover variant in the Figma component library resolves to the
   same fill — #81af4a with a #fdfdfd label — whether the button is
   Add To Cart, Connect With Us, View More, Contact Us or Download
   catalogue. This one was inverting to transparent instead, which made
   the single most important control on the page the only CTA on the
   site that does not go green under the pointer. --c-brand is #81af4a. */
.contact-submit:hover,
.contact-submit:focus-visible {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-page);
}

/* Honeypot. Bots fill every field they find; humans never see this
   one. Hidden with position rather than display:none, which some
   bots check for. */
.contact-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Left column in from the left, form from the right */
.has-js .contact-split.stagger > *:nth-child(1) { --reveal-delay: 0ms;  --reveal-x: -26px; }
.has-js .contact-split.stagger > *:nth-child(2) { --reveal-delay: 90ms; --reveal-x: 26px; }

/* =========================================
   3. LOCATION MAP
========================================= */
.contact-location {
    padding: 20px var(--contact-row) clamp(50px, 6vw, 84px);
    background: var(--c-page);
}

/* Figma: Rectangle 39 is 1280 x 586 at x=80, with the same drop
   shadow every card on the site carries — that shadow is what gives
   the map its edge, since it has no radius and no border. */
/* --- width: 100% is load-bearing, not tidiness --------------------
 * With `aspect-ratio` set and the width left to `auto`, a `min-height`
 * does not just raise the height — the browser resolves the WIDTH back
 * out of the ratio, and the box grows sideways out of its container.
 *
 * That is what pushed the map off the right of the screen on phones:
 * at the 576 breakpoint below, min-height 260 at 4/3 asked for
 * 346.7px of width inside a 333px column, so the map sat 21px from the
 * left edge and 7px from the right — and at 365px wide it reached the
 * right edge with nothing at all.
 *
 * Declaring the width makes it definite, so min-height can only ever
 * affect the height. The map is then letterboxed slightly taller than
 * the ratio on a narrow screen, which is exactly what min-height was
 * there to do in the first place.
 * ------------------------------------------------------------- */
.map-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1280 / 586;
    min-height: 300px;
    overflow: hidden;
    border-radius: 0;
    box-shadow: var(--card-shadow);
    background: #eceff1;
}

.map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* =========================================
   4. RESPONSIVE
========================================= */
@media (max-width: 992px) {
    /* Map above, form below. The map is decorative context; the form
       is the job — but keeping source order means a screen reader
       and a sighted user meet them in the same sequence. */
    .contact-split {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    /* The cap moves to the WRAPPER, not the image: the pins are placed
       against the wrapper, so capping only the image would leave them
       spread across a box wider than the map they belong to. */
    .contact-map {
        max-width: 440px;
        margin: 0 auto;
    }

    .contact-map-art {
        max-width: 440px;
        margin: 0 auto;
    }

    .contact-map-col {
        max-width: 440px;
        margin: 0 auto;
    }

    .has-js .contact-split.stagger > *:nth-child(1),
    .has-js .contact-split.stagger > *:nth-child(2) { --reveal-x: 0px; }

    .map-frame {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 576px) {
    /* --- Phone: the banner carries its HEADLINE only ---------------
     * Client request, and the same rule on every page that has a
     * banner. At 375px the frame is too shallow for a headline and a
     * standfirst both; the headline alone sits comfortably on the
     * photograph, which is where the client wants it. Everything here
     * is back from 577px up.
     * ----------------------------------------------------------- */
    .contact-hero-copy p,
    .contact-hero-rule {
        display: none;
    }

    /* --- The names stay ON the map, as they do on a desktop ---------
     * They used to come off it here: six of the twenty-two sit inside
     * the north-west corner and at the 7px floor they smeared, so the
     * markers kept their places and the names moved to a two-column
     * list underneath.
     *
     * Client request: put them back on the artwork, so the section
     * reads the same on a phone as on a desktop. Two things make that
     * work at 375px — the map gives up the 440px cap it takes from
     * 992 down and uses the full column, and the type floor goes from
     * 7px to 8. Punjab and Uttrakhand still sit close together in the
     * north-west, exactly as they do on the printed map this is drawn
     * from, but every name is legible.
     *
     * The list goes back to being screen-reader-only (its base rule),
     * again as on a desktop: with the names on the map it was the same
     * twenty-two places twice down the page.
     * ------------------------------------------------------------- */
    .contact-map,
    .contact-map-art,
    .contact-map-col {
        max-width: none;
    }

    /* width and margin, not just the cap. The 992 block centres the
       column with `margin: 0 auto`, and auto margins on a grid item
       make it shrink-to-fit rather than fill its track — with the cap
       gone there is nothing left for it to fit TO (the map has no
       width of its own and the artwork inside it is width:100%), so
       the whole column collapsed to zero. It fills the track here. */
    .contact-map-col {
        width: 100%;
        margin: 0;
    }

    .contact-map-pin,
    .contact-map-key {
        font-size: clamp(8px, 2.1cqw, 10px);
    }

    .contact-hero-copy,
    .contact-hero-copy p {
        max-width: none;
    }

    .contact-hero-copy p br { display: none; }

    .contact-hero-rule {
        height: 2px;
        margin: 12px 0 14px;
    }

    /* Both sections take the SAME inset on a phone. The map used
       --contact-row (5.63vw, so 21px at 375) while the form above it
       used --section-gutter (a flat 18), and the two blocks sat on
       different left edges. */
    .contact-main {
        padding: 30px var(--section-gutter) 20px;
    }

    .contact-location {
        padding-inline: var(--section-gutter);
    }

    /* First/Last and Email/Phone stack — two inputs side by side at
       this width leaves neither wide enough to read what you typed. */
    .contact-form .field-row {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 14px;
    }

    /* With the pairs stacked, the spacer would leave a blank gap
       above the second field. */
    .label-spacer { display: none; }

    .contact-field textarea { min-height: 130px; }

    .map-frame {
        aspect-ratio: 4 / 3;
        min-height: 260px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-field input,
    .contact-field textarea,
    .contact-submit {
        transition: none;
    }
}


/* === desktop -2px === */
/* -----------------------------------------------------------------
   2px off the desktop type, as asked. These selectors set a FIXED
   size, which applies at every width -- editing the value in place
   would have shrunk the phone too, and the phone was already right.
   So the reduction is scoped to desktop and the base rule, which is
   what mobile uses, is left exactly as it was.
   ----------------------------------------------------------------- */
@media (min-width: 1025px) {
    .contact-field input, .contact-field textarea { font-size: 14px; }   /* was 16px */
    .contact-submit { font-size: 14px; }   /* was 16px */
}