/* =========================================================
   INQUIRE  —  the pop-up form

   It is a <dialog>, not a section on the page. Native gives
   three things a hand-rolled overlay has to be written to do
   and usually is not: focus is trapped inside it, Escape
   closes it, and everything behind it goes inert.

   ⚠️ THE NO-SCRIPT PATH IS :target, AND IT IS WHY THE LINKS ARE
     STILL REAL ANCHORS. A <dialog> with no "open" is
     display:none, so with JavaScript off an <a href="#inquire">
     would jump to nothing at all. The rule below shows it when
     the hash names it, so the same anchor still works — as a
     plain centred panel with its own scrim, without the focus
     trap that only showModal() can give.

   ⚠️ LABELS ABOVE THE FIELDS, NOT PLACEHOLDERS INSIDE THEM.
     The reference shows the field name inside the box, which is
     the most common accessibility failure there is: the moment
     somebody types, the only thing telling them what the box is
     for disappears — and it is gone exactly when a reader
     checking their own answers needs it. Autofill and
     translation both read the <label>, not the placeholder.
   ========================================================= */

.iq-modal{
  padding:0;
  border:0;
  background:transparent;
  /* ⚠️ PER CENT AND NOT vw. A vw includes the classic scrollbar and a per cent
     does not, and a modal <dialog> is laid out against the initial containing
     block, which is the viewport WITHOUT it. At 92vw the box came out about
     15px wider than the room it had, which pushed the page sideways and left
     the dialog visibly off centre — measured 4.5px of margin on one side and
     19.5 on the other at 390. Shut, the page measured clean, which is how
     every earlier pass missed it. */
  width:min(92%, 600px);
  max-width:none;
  max-height:min(88vh, 900px);
  overflow:visible;
  color:var(--ink);
}
.iq-modal::backdrop{
  background:rgba(35,27,16,.58);
  -webkit-backdrop-filter:blur(3px);
          backdrop-filter:blur(3px);
}

/* ---- the no-script path ----
   ⚠️ position:fixed AND margin:auto TOGETHER are what centre it. The UA
   stylesheet does exactly this for an open dialog; a :target rule that only
   sets display gets a block pinned to the top-left of the document. */
.iq-modal:target{
  display:block;
  position:fixed;
  inset:0;
  margin:auto;
  z-index:220;
}
/* the scrim, for the same path — ::backdrop only exists for showModal() */
.iq-modal:target::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:rgba(35,27,16,.58);
}

/* ---- the panel ---- */
.iq-panel{
  position:relative;
  max-height:inherit;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:clamp(26px,3.4vw,42px) clamp(20px,3vw,40px) clamp(22px,3vw,34px);
  border-radius:var(--r-lg);
  /* ⚠️ THE PANEL IS CREAM AND THE FIELDS ARE WHITE, which is the way round the
     reference has it: the boxes read as cut into the paper rather than laid on
     it. A white panel with white fields needs a border to do all the work.
     ⚠️ FOUR BACKGROUND LAYERS, NOT A PSEUDO-ELEMENT. This box scrolls when the
     panel is taller than the screen, and an absolutely positioned child of a
     scroll container is sized against the padding box, not the content — the
     texture would have covered the first screenful and stopped. Background
     layers on the element itself cannot come apart from it. */
  background-color:var(--cream);
  background-image:
    radial-gradient(120% 80% at 88% -6%, rgba(198,164,85,.17) 0%, rgba(198,164,85,0) 58%),
    radial-gradient(90% 60% at -8% 104%, rgba(198,164,85,.13) 0%, rgba(198,164,85,0) 62%),
    repeating-linear-gradient(135deg,
      rgba(198,164,85,0) 0 12px, rgba(198,164,85,.045) 12px 13px),
    linear-gradient(180deg, var(--white) 0%, rgba(253,251,247,0) 46%);
  border:1px solid rgba(198,164,85,.4);
  box-shadow:
    0 44px 96px -44px rgba(35,27,16,.7),
    0 8px 22px -14px rgba(35,27,16,.3),
    0 1px 0 rgba(255,255,255,.9) inset;
}

.iq-close{
  position:absolute;
  top:clamp(10px,1.2vw,16px);
  right:clamp(10px,1.2vw,16px);
  display:grid;place-items:center;
  width:40px;height:40px;         /* under the 44 floor, so the phone block lifts it */
  border-radius:50%;
  color:var(--ink-2);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.iq-close svg{
  width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:1.7;
}
.iq-close:hover{color:var(--gold-ink);background:var(--gold-tint);}

/* ---- the head ---- */
.iq-head{
  max-width:44ch;
  margin:0 auto clamp(20px,2.4vw,28px);
  text-align:center;
}
.iq-head .eyebrow{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-bottom:10px;
}
.iq-head .eyebrow i{
  width:clamp(18px,2vw,28px);height:1px;
  background:linear-gradient(90deg, rgba(198,164,85,0), var(--gold));
}
.iq-title{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(25px,2.6vw,36px);
  line-height:1.12;
  letter-spacing:-.018em;
  color:var(--ink);
}
.iq-title em{font-style:italic;color:var(--gold-ink);}
.iq-lede{
  margin:clamp(8px,1vw,12px) auto 0;
  font-size:clamp(13px,1vw,14.5px);
  font-weight:300;
  line-height:1.62;
  /* ⚠️ --ink-2, not --ink-3. Every 300-weight line on this page's warm grounds
     that took --ink-3 has measured between 4.2 and 4.4 against the 4.5 it
     owes — the routine's lead carries the same note. */
  color:var(--ink-2);
}

/* What the reader pressed, carried into the panel so the inquiry is visibly
   about that product and not a fresh start. Gold tint rather than a field:
   it is a label, not something to fill in. */
.iq-about{
  display:inline-flex;align-items:center;gap:8px;
  margin:clamp(10px,1.2vw,14px) auto 0;
  padding:7px 15px;
  border-radius:var(--r-pill);
  background:var(--gold-tint);
  border:1px solid var(--gold-soft);
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--gold-ink);
}
.iq-about b{font-weight:600;}
/* ⚠️ THE hidden ATTRIBUTE NEEDS SAYING HERE. main.js sets .hidden on this
   line for every inquiry that names no product, but [hidden] is display:none
   in the UA sheet and the rule above is display:inline-flex in the author
   sheet " author wins, so an empty gold capsule sat under the lede on every
   general inquiry. Photographed on a phone before it was caught. */
.iq-about[hidden]{display:none;}

/* =========================================================
   The send, and what it turns into

   ⚠️ THE FORM IS HIDDEN BY THE PANEL'S CLASS, NOT BY [hidden] ON THIS
     BLOCK. .iq-about two rules up is the cautionary tale: an author display
     beats the UA sheet's [hidden], so a block styled display:flex ignores the
     attribute completely and sits there empty. One class on the panel drives
     both halves and there is no attribute to disagree with.
   ========================================================= */
/* ⚠️ THE PANEL RESIZES SMOOTHLY, AND IT NEEDS JAVASCRIPT TO DO IT. Asked
   for: "make sure its smooth". Swapping a four-field form for two lines
   takes about 400px out of the box, and with nothing here that was one
   frame " the panel snapped shut around the plane before it had flown.

   height:auto cannot be transitioned, so main.js pins the height it has,
   swaps the contents, reads the height it wants, and sets it; this rule is
   what carries it between the two. The inline height is cleared on
   transitionend so the panel goes back to sizing itself " nothing is left
   pinned for the next open.

   ⚠️ overflow:hidden ONLY WHILE IT MOVES. The panel is a scroller; mid
     transition its contents are briefly taller than its box, and without
     this a scrollbar flickers in and out down the side of the dialog. */
.iq-panel{transition:height .48s var(--ease);}
.iq-panel.is-resizing{overflow:hidden;}

.iq-sent{display:none;}
.iq-panel.is-sent .iq-form,
.iq-panel.is-sent .iq-head,
/* the reassurance strip belongs to the asking, not to the answer */
.iq-panel.is-sent .iq-trust{display:none;}
.iq-panel.is-sent .iq-sent{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(18px,4vw,34px) 0 clamp(6px,1.4vw,12px);
}

/* the two drawings share one square so the plane leaves and the mark arrives
   in the same place rather than the block changing height between them */
.iq-sent-art{
  position:relative;
  display:block;
  width:96px;height:96px;
  margin-bottom:clamp(14px,2.4vw,20px);
}
.iq-sent-art svg{position:absolute;inset:0;width:100%;height:100%;}
.iq-plane{
  stroke:var(--gold-accent);
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
}
.iq-panel.is-sent .iq-plane{animation:iqPlaneFly 1.15s var(--ease) both;}
.iq-check{opacity:0;}
.iq-panel.is-sent .iq-check{animation:iqCheckIn .42s var(--ease) .92s both;}
.iq-check-ring{
  stroke:var(--gold-soft);
  stroke-width:2;
  fill:rgba(198,164,85,.10);
}
.iq-tick{
  stroke:var(--gold-accent);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  /* ⚠️ pathLength="1" IS ON THE PATH IN THE MARKUP, which is what lets a
     dash array be written as plain 1 here instead of the measured length of
     a curve nobody wants to re-measure when the tick is redrawn. */
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
.iq-panel.is-sent .iq-tick{animation:iqTickDraw .46s var(--ease) 1.16s both;}

@keyframes iqPlaneFly{
  0%   {opacity:0; translate:-30px 18px; rotate:-10deg; scale:.86;}
  22%  {opacity:1; translate:-6px 4px;   rotate:-4deg;  scale:1;}
  52%  {opacity:1; translate:4px -3px;   rotate:-2deg;  scale:1;}
  100% {opacity:0; translate:78px -58px; rotate:8deg;   scale:.8;}
}
@keyframes iqCheckIn{
  from {opacity:0; scale:.62;}
  to   {opacity:1; scale:1;}
}
@keyframes iqTickDraw{
  from {stroke-dashoffset:1;}
  to   {stroke-dashoffset:0;}
}

.iq-sent-title{
  font-family:var(--f-display);
  font-size:clamp(26px,3.4vw,34px);
  font-weight:500;
  line-height:1.1;
  color:var(--ink);
}
/* .iq-sent-note and .iq-sent-close are gone with the elements they styled:
   the Done screen is the mark and the word, nothing else. */

/* ⚠️ THE WORDS ARRIVE LAST, AND THE ORDER IS THE WHOLE ASK: "paper plane
   na llipad then DONE SA HULI and check". Written without these delays the
   plane flew across a panel that already said Done underneath it, which
   tells the reader the outcome before the gesture that is supposed to
   deliver it. Caught in a frame grab at 120ms, not by reading the CSS.

   Each one is `both`, so the resting state before the delay is the first
   keyframe — opacity 0 — rather than the element flashing on and then
   animating. Reduced motion collapses the durations and they simply appear,
   which is the correct degradation: the end state is what matters. */
.iq-panel.is-sent .iq-sent-title{animation:iqSentIn .5s var(--ease) 1.12s both;}
@keyframes iqSentIn{
  from {opacity:0; translate:0 10px;}
  to   {opacity:1; translate:0 0;}
}

/* ---- the form ---- */
.iq-form{
  display:grid;
  gap:clamp(13px,1.5vw,18px);
}
/* ⚠️ ONE COLUMN AT EVERY WIDTH. Name and Email were side by side above 560px;
   the reference stacks all four, and in a panel this narrow a two-up row gives
   each field about 250px — narrower than the values people type into them. The
   .iq-field-wide class stays on the markup and is simply not needed here. */

.iq-field{display:grid;gap:7px;min-width:0;}
.iq-label{
  font-family:var(--f-logo);
  font-size:clamp(10.5px,.84vw,11.5px);
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-2);
}
/* ⚠️ NOTHING USES THIS TODAY. It styled the "(optional)" on Phone, and Phone
   is required now — every field on this form is. Kept because the next label
   that needs a quiet aside should not have to invent it again, and because a
   rule with no matching element costs nothing. */
.iq-label span{
  text-transform:none;
  letter-spacing:.02em;
  font-weight:400;
  color:var(--ink-3);
}

.iq-input,
.iq-textarea{
  width:100%;
  font-family:var(--f-body);
  font-size:15px;            /* ⚠️ 16px or more on iOS or Safari zooms the page
                                on focus — the phone block below lifts it */
  font-weight:400;
  line-height:1.5;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:11px 13px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.iq-textarea{
  /* down from clamp(104px,12vw,140px) — it was the tallest thing in the panel
     and a note is two or three lines, not a page. resize:vertical is what lets
     somebody with more to say take the room back. */
  min-height:clamp(76px,8vw,96px);
  resize:vertical;
}
.iq-input::placeholder,
.iq-textarea::placeholder{color:var(--ink-3);opacity:1;}
.iq-input:hover,
.iq-textarea:hover{border-color:rgba(198,164,85,.5);}
.iq-input:focus,
.iq-textarea:focus{
  outline:none;              /* the global :focus-visible ring does this job */
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(198,164,85,.16);
}

.iq-send{
  grid-column:1 / -1;
  /* full width, as the reference has it — and it is the last thing in a single
     column, so anything narrower reads as a loose end */
  width:100%;
  justify-content:center;
  margin-top:clamp(6px,1vw,12px);
}
/* ⚠️ .iq-foot IS GONE AND THIS IS THE RECORD OF IT. The element it styled
   was one line under the send button — "Opens your mail app." — kept here
   deliberately though the reference had no such line, because "Send" on this
   form opens the reader's own mail app and the line was what stopped that
   being a surprise. It was removed on a direct ask against a screenshot of
   it. Deleted rather than commented out, which is what this file does with
   rules that have nothing left to style; the markup carries the full note. */

/* ⚠️ role="status" IS ON AN ELEMENT THAT IS ALWAYS IN THE DOM. A live region
   added to the page at the moment it has something to say is announced by
   nothing — the region has to exist before the text lands in it. */
.iq-status{
  grid-column:1 / -1;
  margin:0;
  min-height:1.4em;
  text-align:center;
  font-size:clamp(12px,.95vw,13.5px);
  line-height:1.4;
  color:var(--gold-ink);
}
.iq-status:empty{min-height:0;}

/* ⚠️ THE PANEL TAKES FOCUS AND MUST NOT LOOK LIKE IT. It carries tabindex="-1"
   so the dialog can put focus somewhere that is not a text field — see the note
   on the markup — and a ring around the whole panel would read as an error
   state. This is the standard dialog pattern: the container is a focus
   destination, not a control. Every real control inside it keeps its ring. */
.iq-panel:focus,
.iq-panel:focus-visible{outline:none;}

/* ---- the line about what happens to what they type ----
   It sits under the button, which is where the supplied reference has it, and
   it is the last thing read before the form is sent. Gold shield, page ink. */
.iq-safe{
  grid-column:1 / -1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:7px;
  margin:clamp(8px,1.2vw,12px) 0 0;
  text-align:left;
}
.iq-safe svg{
  flex:none;
  width:14px;height:auto;
  margin-top:1px;              /* optical: the shield's cap sits above the x-height */
  fill:none;stroke:var(--gold);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.iq-safe span{
  font-size:clamp(12px,.92vw,12.5px);
  line-height:1.4;
  color:var(--ink-2);
  max-width:34ch;              /* two tidy lines rather than one long one */
}

/* ---- the reassurance strip along the foot ----
   ⚠️ BUILT TO #trust, SECTION 1b, WHICH IS THE FORMAT THAT WAS ASKED FOR.
   Copied from the page rather than from the photograph of it: mark on top,
   centred, a name under it and a sub under that, a hairline centred in the gap
   between the columns.
   ⚠️ THE PROPORTION IS COPIED, THE NUMBERS ARE NOT. That band runs about 380px
   to a column in the page shell; this one runs about 104 inside a 366px panel,
   so a 42px mark and a 21px display name would leave nowhere for the words.
   What carries across is the mark at roughly TWICE the name — "mas malaki ang
   icons kesa sa texts".
   ⚠️ IT BLEEDS TO THE PANEL EDGES BY CANCELLING THE PANEL'S OWN PADDING, which
   is why the margins repeat those exact clamps. They have to stay in step. */
.iq-trust{
  --iqt-gap:clamp(12px,4vw,26px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--iqt-gap);
  margin:clamp(12px,1.7vw,20px)
         calc(-1 * clamp(20px,3vw,40px))
         calc(-1 * clamp(22px,3vw,34px));
  padding:clamp(12px,1.8vw,16px) clamp(10px,1.8vw,18px) clamp(13px,2vw,17px);
  list-style:none;
  border-top:1px solid rgba(198,164,85,.34);
  border-radius:0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
  background:
    linear-gradient(180deg, rgba(246,239,225,.5) 0%, rgba(243,234,216,.72) 100%);
}
.iq-trust li{
  position:relative;            /* the hairline hangs off this */
  display:grid;
  align-content:start;
  justify-items:center;
  text-align:center;
  gap:clamp(5px,1.4vw,8px);
  min-width:0;
}
/* ⚠️ ONE VARIABLE, READ IN BOTH PLACES. The hairline sits at minus half the
   gap, so the gap and the offset have to be the same number — trust.css
   records what happens when they drift: every rule drawn up to 11px out of
   its own gap, touching the column beside it. */
.iq-trust li + li::before{
  content:"";
  position:absolute;
  left:calc(var(--iqt-gap) * -.5);
  top:8%;bottom:8%;
  width:1px;
  background:linear-gradient(180deg,
    rgba(198,164,85,0), rgba(198,164,85,.42) 50%, rgba(198,164,85,0));
}
.iq-t-ico{display:block;line-height:0;}
/* ⚠️ OUTLINES AGAIN, AND 1.45 IS THE BAND'S OWN STROKE. Filled glyphs were
   right at 20px beside 12px type; at 28px above a display name they read as
   three blobs. The band this copies is fill:none throughout. */
.iq-trust svg{
  width:clamp(26px,7.2vw,32px);
  height:auto;aspect-ratio:1;
  fill:none;stroke:var(--gold-ink);stroke-width:1.45;
  stroke-linecap:round;stroke-linejoin:round;
  overflow:visible;
}
/* the band's display face and weight, at the size this column can hold */
.iq-t-name{
  margin:0;
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(13px,1.05vw,14.5px);
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--ink);
  text-wrap:balance;
}
/* ⚠️ 12px IS THE FLOOR FOR TEXT ON A PHONE and this line sits on it, so the
   clamp's minimum is 12 and not a vw that would go under at 320. */
.iq-t-sub{
  margin:0;
  font-size:clamp(12px,.92vw,12.5px);
  font-weight:400;
  line-height:1.35;
  color:var(--ink-2);
  text-wrap:balance;
}

@media (max-width:380px){
  /* ⚠️ NOTHING TO SWITCH HERE ANY MORE, AND THAT IS THE POINT. This block used
     to turn an icon-beside-label row into a stacked one because "Responsive"
     is a single unbreakable word that would not fit beside its mark at 320.
     The format asked for is stacked at every width, so the narrow case is the
     same shape as the wide one and only the gap comes in. */
  .iq-trust{--iqt-gap:clamp(8px,3vw,14px);}
}

@media (max-width:620px){
  /* ⚠️ SIZED AND PLACED AGAINST THE VISUAL VIEWPORT, NOT THE LAYOUT ONE, and
     that is the difference between the form working with a keyboard up and
     not. It used to be a 88dvh box centred in the layout viewport. On iOS the
     keyboard does not touch the layout viewport — it shrinks the VISUAL one
     and leaves dvh exactly where it was — so the box kept its full height, the
     keys covered the bottom of it, and the send button, the safety line and
     the strip were all behind them. The top was cut too: focusing a field
     scrolls .iq-panel internally and the heading goes up with it, so what was
     left on screen was a band of fields with no beginning and no end.
     --vvh and --vvt are visualViewport.height and .offsetTop, published by
     main.js. The box becomes exactly the space above the keyboard.
     ⚠️ --vvt IS NOT DECORATION. position:fixed pins to the LAYOUT viewport;
     when the keyboard pushes the visual viewport down inside it, a fixed box
     stays put and the panel drifts off the top of what can be seen.
     ⚠️ THE FALLBACK IS 100dvh AND IT HAS TO BE A LENGTH, not 88dvh: with no
     visualViewport the box is the full height and the padding below is the
     inset, which is what the old 88dvh was standing in for. */
  /* ⚠️ display:flex IS ON THE OPEN STATES ONLY, AND THAT IS A BUG FIX.
     It was on .iq-modal flat, and an author display beats the UA stylesheet's
     dialog:not([open]){display:none} " so under 620px THE FORM WAS ON SCREEN
     WHETHER OR NOT IT HAD BEEN OPENED, pinned across the top of the page
     with the header painting over it. Reported off an iPhone as a form that
     would not go away: pressing the close ran dlg.close(), the open attribute
     went, and this rule went on drawing it. The close was not reachable
     either " it sat under the header band, which takes the tap.

     Everything else in here is geometry and is harmless while the box is
     display:none, so only the display moves.

     ⚠️ BOTH SELECTORS, NOT JUST [open]. :target is the no-script path
       described at the top of this file, and it needs the same phone
       geometry " it was getting display:block from the base rule and a
       column layout from nowhere. */
  /* ⚠️ THE KEYBOARD OVERLAPS THE FORM NOW, IT NO LONGER RESIZES IT, asked
     for against a screenshot of another form doing exactly that: "wag icut
     yung form i overlap lang yung keyboard".

     This box used to be height:var(--vvh) and top:var(--vvt) — the visual
     viewport, so it shrank to the space above the keys and the whole form
     reflowed every time the keyboard opened or closed. The note that argued
     for it is directly above and it is a real argument: with a full-height
     box the keys cover the bottom of the form. What it cost is the thing
     that was reported — a form that jumps and re-lays-out under the fingers
     while it is being filled in.

     Full height, and the panel is its own scroller: the browser scrolls a
     focused field into view inside it, which is how the uploaded UI behaves.
     --vvh and --vvt are still published by main.js for anything else that
     wants them; this rule is simply no longer one of their readers. */
  .iq-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    max-width:none;
    /* ⚠️ A MEASURED HEIGHT, NOT A VIEWPORT UNIT, AND THE SECOND ATTEMPT AT
       THIS. The first one swapped var(--vvh) for 100dvh on the reasoning
       written into the note above: the keyboard shrinks the VISUAL viewport
       and leaves the dynamic one alone. Photographed on the handset it was
       still cut — panel bottom sitting above the keys with the page showing
       between the two — so on that device dvh tracks the keyboard as well.

       --screen-h is published by screenHeight() in main.js and is the
       TALLEST viewport this tab has reported, a high-water mark that never
       goes down. A keyboard cannot shrink it, because a keyboard only ever
       makes the number smaller and smaller numbers are discarded. That is
       the one height here that is immune to the thing being complained
       about.

       ⚠️ THE dvh LINE STAYS UNDER IT AS THE NO-JS FALLBACK. Without the
         script the var is unset, the fallback applies, and the form behaves
         as it did before this change rather than collapsing to nothing. */
    height:100dvh;
    height:var(--screen-h, 100dvh);
    max-height:none;
    margin:0;
    flex-direction:column;
    justify-content:center;
    padding:12px;
  }
  .iq-modal[open],
  .iq-modal:target{display:flex;}
  /* ⚠️ NOT max-height:inherit HERE. The base rule inherits the modal's
     max-height, and the modal's is now "none" — the panel would inherit that
     and grow past the box. 100% of a flex container with a real height is the
     number that means "as tall as there is room for". */
  .iq-panel{
    max-height:100%;
    /* a field focused at the very edge of the scroller lands flush against it
       otherwise, which reads as clipped */
    scroll-padding-block:18px;
  }
  .iq-input,
  .iq-textarea{font-size:16px;}
  /* the 44px every touch guideline asks for */
  .iq-close{width:44px;height:44px;}
}

@media (prefers-reduced-motion:reduce){
  .iq-input,
  .iq-textarea,
  .iq-close{transition:none;}
}


/* =========================================================
   Validation — this form draws its own, the browser draws none
   =========================================================
   ⚠️ THIS IS THE ONLY RED ON THE PAGE AND THAT WAS A DECISION, NOT A SLIP.
   The note on .iq-trust in index.html records red being kept out of this
   panel once already: the supplied comp was navy and red on grey, and
   dropping that in "would have been the only red on the page". That still
   stands for decoration. This is not decoration — it is the one state the
   form has to signal unmistakably, red is what a reader already reads as
   "this one", and BRAND.md's palette governs the brand's own surfaces, not
   error states. Asked for directly: colour the fields that need filling.
   ⚠️ IT IS A WARM RED, AND THAT IS WHY THIS VALUE. #B3261E carries enough
   brown to sit in a cream-and-gold panel instead of buzzing against it, and
   it clears 6:1 on white, so the message is readable as text and not only
   as a colour. Do not swap it for a pure red without checking both. */
.iq-form{--iq-error:#B3261E;}

.iq-err{
  margin:0;
  font-size:clamp(11.5px,.9vw,12.5px);
  line-height:1.35;
  color:var(--iq-error);
  /* display, not visibility or height: .iq-field is a grid with a gap, and a
     hidden-but-present row would leave that gap behind under every clean
     field on the form */
  display:none;
}
.iq-field.is-invalid .iq-err{display:block;}

/* the field itself is what turns, which is what was asked for — the border
   carries it and the tint is there so it still reads at a glance on a phone
   held at arm's length, where a 1px edge does not */
.iq-field.is-invalid .iq-input,
.iq-field.is-invalid .iq-textarea{
  border-color:var(--iq-error);
  background:#FFF9F8;
}
.iq-field.is-invalid .iq-input:hover,
.iq-field.is-invalid .iq-textarea:hover{border-color:var(--iq-error);}
/* ⚠️ THE FOCUS RULE HAS TO BE RESTATED IN RED. .iq-input:focus sets a gold
   border and a gold ring, and it is later in this file with equal
   specificity, so without this the field turns gold again the moment the
   reader does the one thing the error is asking them to do. */
.iq-field.is-invalid .iq-input:focus,
.iq-field.is-invalid .iq-textarea:focus{
  border-color:var(--iq-error);
  box-shadow:0 0 0 3px rgba(179,38,30,.16);
}

/* the summary line under the button borrows the same red; it is the same
   element that says "opening your mail app" on the way out */
.iq-status.is-error{color:var(--iq-error);}

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