/* Corporate-only additions to the shared hospitality skin. Every selector is
   fenced by the body class so this file cannot restyle another page family. */
.icw-corporate {
  --corporate-muted: #6e645d;
}

[data-icw-theme="dark"] .icw-corporate {
  --corporate-muted: var(--muted);
}

/* Detail-page cadence. Stay pages repeat .detail-section { padding: 48px 0;
   border-bottom: 1px solid var(--line) } and that hairline every ~48px IS the
   site's vertical music. Corporate previously used its own larger padding with
   no dividers, so even matching components read as a different page. */
.icw-corporate main > section {
  padding: clamp(48px, 5vw, 64px) 0;
  border-bottom: 1px solid var(--line);
}

.icw-corporate main > section:last-of-type {
  border-bottom: 0;
}

/* The .hero component is GONE from this page as of 2026-08-19. It was the
   events-page vocabulary -- text over a darkened reuse of the index's own
   qlo-header.webp -- which is precisely why the page read as a knock-off of
   the homepage rather than a sibling of it. The hero is now .qlo-hero (a real
   photograph in the header) plus the facts shelf, exactly like the index; both
   are set up at the foot of this file. Nothing here styles .hero any more. */

.icw-corporate h1,
.icw-corporate h2,
.icw-corporate h3 {
  margin-block-start: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
}

.icw-corporate h1 {
  max-width: 820px;
  margin-block-end: 0;
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.icw-corporate h2 {
  margin-block-end: 1rem;
  font-size: clamp(2.1rem, 4vw, 3.35rem);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.icw-corporate h3 {
  margin-block-end: 0;
  font-size: 1.18rem;
  line-height: 1.25;
}

/* Components that arrive with the site's own type scale keep it. The three
   rules above are for BODY headings; letting them win over shared furniture
   would mean the corporate page silently restyles the footer and the amenity
   tiles for everyone who lands on it. The footer title in particular inherits
   colour: var(--ink) from the rule above -- dark ink on the footer's #1b1714 --
   which is invisible, so this is a correction, not a preference. */
.icw-corporate .footer-title {
  color: #fff;
  font-size: 2.1rem;
  line-height: 1.05;
}

.icw-corporate .amenity-highlight h3 {
  margin-block-end: 9px;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Corporate buttons speak the same language as the collection and events pages.
   The site vocabulary is micro-caps on a hairline copper rule that inverts to
   solid --ink on hover, matching .view-button / .book-button. The previous
   filled-with-drop-shadow treatment was the one thing on this page that did not
   appear anywhere else on the site. Shadows are dropped deliberately: no other
   ICW control casts one. */
.icw-corporate .button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 1px solid var(--copper);
  border-radius: 4px;
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.icw-corporate .button-primary {
  color: var(--on-accent);
  background: var(--copper);
  border-color: var(--copper);
  box-shadow: none;
}

/* Role correction: this is the page's COMMIT control, so it mirrors
   .book-button (solid copper, deepens on hover) rather than .view-button, which
   is the site's *browse* affordance. The first pass wrongly gave the primary a
   hairline-and-invert treatment, making it read as a secondary. */
.icw-corporate .button-primary {
  min-width: 116px;
  padding: 12px 24px;
}

.icw-corporate .button-primary:hover,
.icw-corporate .button-primary:focus-visible {
  color: var(--on-accent);
  background: var(--copper-dark);
  border-color: var(--copper-dark);
  box-shadow: none;
  transform: translateY(-1px);
}

.icw-corporate .button-secondary {
  color: var(--copper-dark);
  background: rgba(var(--cream-rgb), 0.86);
  border-color: var(--copper);
  box-shadow: none;
}

.icw-corporate .button-secondary:hover,
.icw-corporate .button-secondary:focus-visible {
  color: var(--on-accent);
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-1px);
}

.icw-corporate .eyebrow,
.icw-corporate .stay-kicker {
  font-size: 0.78rem;
  line-height: 1.45;
}

.icw-corporate .section-intro {
  max-width: 740px;
}

.icw-corporate .section-intro > p:not(.eyebrow) {
  color: var(--corporate-muted);
  font-size: 1.06rem;
  line-height: 1.7;
}

/* .route-grid, .audience-grid, .detail-grid, .card, .route-card, .card-kicker
   and .band are all gone with the card walls they styled. Six consecutive
   "section-intro + grid of identical cards" beats, alternated only by a
   background stripe, was the monotone the 2026-08-19 rebuild removed: routes
   and geography are now .stay-grid magazine rows, situations are the index's
   amenity tiles, and the hairline cadence above is the only vertical rhythm.
   Do not reintroduce these without reintroducing the problem. */

.icw-corporate .list {
  display: grid;
  gap: 0.65rem;
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
}

.icw-corporate .list li {
  display: flex;
  gap: 0.6rem;
}

.icw-corporate .list li::before {
  content: '—';
  color: var(--copper);
  font-weight: 800;
}

.icw-corporate .process {
  counter-reset: process;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-block-start: 2rem;
}

.icw-corporate .process-step {
  padding-block-start: 0.9rem;
  border-block-start: 2px solid var(--copper);
}

.icw-corporate .process-step::before {
  counter-increment: process;
  content: '0' counter(process);
  display: block;
  margin-block-end: 0.75rem;
  color: var(--copper);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.icw-corporate .notice {
  margin-block-start: 2rem;
  padding: 1rem 1.15rem;
  border-inline-start: 4px solid var(--copper);
  color: var(--ink-soft);
  background: var(--cream);
}

.icw-corporate .faq {
  margin-block-start: 2rem;
  border-block-start: 1px solid var(--line);
}

.icw-corporate .faq details {
  padding: 1rem 0;
  border-block-end: 1px solid var(--line);
}

.icw-corporate .faq summary {
  cursor: pointer;
  font-weight: 750;
}

.icw-corporate .faq details p {
  max-width: 760px;
  color: var(--corporate-muted);
}

/* 2026-08-21, owner-directed. This band used to pin its own always-dark
   palette -- background: var(--charcoal) with #f8f5f0 / #fff / #f2bd98 /
   #eee5dc text -- which made the one place on the site a visitor is asked to
   type the one place that did not look like the site. Every other section is
   light. The band now takes the same var(--paper-deep) alternating ground the
   rest of the page uses, and the card on top of it is the light cream surface
   the stay page's availability card is made of. Nothing here forces a colour
   any more, so all of it follows the theme in both light and dark mode. */
.icw-corporate .proposal {
  background: var(--paper-deep);
}

.icw-corporate .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block-start: 2rem;
}

.icw-corporate .form-field {
  display: grid;
  gap: 0.35rem;
}

.icw-corporate .form-field--full {
  grid-column: 1 / -1;
}

.icw-corporate .form-field label {
  font-weight: 700;
}

.icw-corporate .form-field input,
.icw-corporate .form-field select,
.icw-corporate .form-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.65rem 0.75rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
}

.icw-corporate .form-field textarea {
  min-height: 112px;
  resize: vertical;
}

.icw-corporate .form-field small,
.icw-corporate .form-note {
  font-size: 0.9rem;
  line-height: 1.6;
}

/* DEFECT-2 (2026-08-19) fixed a light-mode contrast failure that only existed
   because the band above pinned a FIXED near-white palette for its charcoal
   ground while the field cards underneath were theme-aware var(--paper): the
   .required marker measured 1.04:1 and the #requirements-help <small> 1.02:1
   in light mode. That fixed palette is gone as of 2026-08-21, so the two
   hard-coded per-theme pins it needed are gone with it. These are now the
   theme tokens themselves, which carry their own verified value in each mode:
   --ink-soft is 7.61:1 vs light --paper and 7.26:1 vs dark --paper, and
   --copper-dark is 7.27:1 vs light --paper and 7.19:1 vs dark --paper. Do not
   re-introduce a literal colour here. */
.icw-corporate .proposal .form-field small {
  color: var(--ink-soft);
}

.icw-corporate .required {
  color: var(--copper-dark);
}

/* The disabled-fieldset and disabled-button treatments are gone. They existed
   to make an unusable form legible; the form now works, posts to request.php
   and emails the office, so there is nothing left to grey out. A control a
   visitor cannot use is worse than no control at all -- do not ship one again. */

.icw-corporate .site-footer .footer-bottom {
  font-size: 0.76rem;
  line-height: 1.55;
}

[dir="rtl"] .icw-corporate {
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

[dir="rtl"] .icw-corporate h1,
[dir="rtl"] .icw-corporate h2,
[dir="rtl"] .icw-corporate h3 {
  font-family: "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  letter-spacing: normal;
  line-height: 1.3;
}

[dir="rtl"] .icw-corporate .eyebrow,
[dir="rtl"] .icw-corporate .stay-kicker,
[dir="rtl"] .icw-corporate .process-step::before {
  font-size: 0.86rem;
  letter-spacing: normal;
  line-height: 1.7;
}

[dir="rtl"] .icw-corporate .form-note,
[dir="rtl"] .icw-corporate .form-field small,
[dir="rtl"] .icw-corporate .field-error,
[dir="rtl"] .icw-corporate .site-footer .footer-bottom {
  font-size: 0.9rem;
  line-height: 1.75;
}

@media (max-width: 850px) {
  .icw-corporate .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .icw-corporate .process {
    grid-template-columns: 1fr;
  }
}

@media print {
  /* The hero is a photograph in the header now, and print already drops it.
     What print still needs is the facts shelf as readable text rather than a
     floating card lifted 38px over a photo that is not there. */
  .icw-corporate .qlo-search-section {
    margin-block-start: 0;
  }

  .icw-corporate .qlo-search-shelf.v3-discover-shelf {
    box-shadow: none;
  }
}


/* ---------------------------------------------------------------------------
   Proposal block as a detail-page availability card.

   Stay pages present their commit UI in .availability-card: hairline border,
   cream at 0.94, the booking-field idiom for every control. Corporate borrows
   that SKIN. What it used to borrow as well -- a sticky 430px sidebar column --
   was wrong for nine fields: at 1280 it left the heading alone in a 1fr rail
   and squeezed every control to 178px, which is the "all cramped over to the
   right" the owner reported on 2026-08-21. An availability card is a sidebar
   because it accompanies a property; a proposal form is the section's whole
   subject, so it gets the whole shell. The intro sits on top of it.
   --------------------------------------------------------------------------- */
.icw-corporate .proposal .form-grid {
  margin-block-start: 0;
}

/* The CARD is the form, not the field grid: the grid is now just a grid, and
   the submit button lives inside the same paper as the fields it sends. */
.icw-corporate .proposal-form {
  margin-block-start: clamp(20px, 3vw, 30px);
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(var(--cream-rgb), 0.94);
}

/* Form controls in the site's booking-field idiom: stacked label over control,
   generous target height, hairline rules between fields. The two date controls
   are still native <input type="date"> in the markup -- they are the no-JS
   path -- but they are no longer what a visitor with JavaScript sees. */
/* align-content, NOT justify-content. This rule said justify-content: center
   for two years and nobody saw it, because the field was never wider than the
   178px column it was trapped in and a centred column of that width looks
   left-aligned. Given the card's real width the labels and every answer sat in
   the middle of their box, against this page's own "type is left-anchored
   everywhere" rule. What was always meant was the VERTICAL centring inside the
   63px minimum, which is align-content on a grid. */
.icw-corporate .proposal .form-field {
  min-height: 63px;
  align-content: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.icw-corporate .proposal .form-field label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted, var(--ink-soft));
}

.icw-corporate .proposal .form-field input,
.icw-corporate .proposal .form-field select,
.icw-corporate .proposal .form-field textarea {
  min-height: 0;
  padding: 2px 0 0;
  border: 0;
  background: transparent;
}

/* ===========================================================================
   v3 RECOMPOSITION — layout, not polish.

   v1 and v2 fixed buttons, motion, section rhythm and the form card, but never
   touched composition, which is what still read as machine-generated: a
   CENTRED hero over a dark photographic panel and SIX equal-column grids.
   The v3 answer was asymmetric card grids. The 2026-08-19 rebuild went past
   that and deleted the card grids entirely in favour of the site's own
   components, so the asymmetry rules that used to live here have gone with
   the selectors they targeted. What remains is the part that is still true:
   left-anchored type and alternating grounds. Logical properties throughout so
   the Arabic RTL build mirrors.
   =========================================================================== */

@media (min-width: 900px) {
  /* Process keeps its four steps but gains an offset so the row is not a ruler. */
  .icw-corporate .process-step:nth-child(even) {
    margin-block-start: 1.75rem;
  }
}

/* Alternating grounds give the page a cadence instead of one flat field.
   The proposal band sets its own charcoal and the closing band sets its own
   sage, so both are excluded rather than fought with. */
.icw-corporate main > section:nth-of-type(even):not(.proposal):not(.final-cta) {
  background: var(--paper-deep);
}

/* Type is left-anchored everywhere; centred headings read as template output.
   The hero is the one deliberate exception: it is the index's own centred
   .qlo-hero-copy, and matching the front door is the entire point of it. */
.icw-corporate .section-intro {
  text-align: start;
}


/* ===========================================================================
   2026-08-19 REBUILD — the page in the site's own grammar.

   Everything below exists because the corporate page was ignoring the five
   load-bearing conventions the index and the stay pages share: a photographic
   hero with a facts shelf, magazine rows with real interiors, hairline amenity
   tiles, the host card, and the full footer grid. These rules re-scope the
   index's own components onto this page; they add no new visual language.
   Every selector stays fenced by .icw-corporate.
   =========================================================================== */

/* ---- Hero: the index's .qlo-hero, at a corporate height ------------------ */

.icw-corporate .qlo-hero {
  height: clamp(420px, 58vh, 620px);
}

/* The index puts a bare <img> straight inside .qlo-hero. This page uses a
   <picture> so the phone downloads a 400px derivative instead of a 1200px one,
   which puts an element between .qlo-hero and its image and would otherwise
   drop the absolute positioning that makes the shade and the copy sit on top. */
.icw-corporate .qlo-hero > picture {
  position: absolute;
  inset: 0;
  display: block;
}

.icw-corporate .qlo-hero > picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* "Corporate stays in Montréal" is five words where the index has one, so the
   shared 3.6-6.6rem display size would wrap to three lines inside a 720px
   copy block. It also has to opt OUT of .icw-corporate h1's colour: var(--ink),
   which is dark ink and would be invisible over the photograph. */
.icw-corporate .qlo-hero-copy h1 {
  max-width: none;
  color: inherit;
  font-size: clamp(2.5rem, 5.2vw, 4.4rem);
  font-weight: 400;
  line-height: 0.98;
}

/* ---- Facts shelf: the index's own, three facts instead of two ------------ */

.icw-corporate .qlo-search-section {
  width: min(930px, calc(100% - 40px));
  margin: -38px auto 0;
}

.icw-corporate .qlo-search-shelf.v3-discover-shelf {
  min-height: 0;
  grid-template-columns: 1fr auto;
}

.icw-corporate .v3-hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.icw-corporate .v3-hero-facts li {
  min-width: 0;
  min-height: 76px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-inline-end: 1px solid var(--line);
}

.icw-corporate .v3-hero-facts li:last-child {
  border-inline-end: 0;
}

.icw-corporate .v3-hero-facts .fact-label {
  margin-bottom: 4px;
  color: var(--copper);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.icw-corporate .v3-hero-facts .fact-value {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

.icw-corporate .v3-discover-button {
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  gap: 9px;
  margin: 0 16px;
  min-height: 48px;
  font-size: 0.8rem;
  text-decoration: none;
}

/* RTL: the shelf's down-arrow points DOWN in every language, but the label
   before it must not drag it to the wrong side of the button. */
[dir="rtl"] .icw-corporate .v3-hero-facts .fact-label,
[dir="rtl"] .icw-corporate .v3-discover-button {
  letter-spacing: normal;
  text-transform: none;
}

@media (max-width: 780px) {
  .icw-corporate .qlo-search-section {
    width: calc(100% - 28px);
  }

  .icw-corporate .qlo-search-shelf.v3-discover-shelf {
    grid-template-columns: 1fr;
  }

  .icw-corporate .v3-hero-facts {
    grid-template-columns: 1fr;
  }

  .icw-corporate .v3-hero-facts li {
    min-height: 0;
    padding: 8px 14px;
    border-inline-end: 0;
    border-block-end: 1px solid var(--line);
  }

  .icw-corporate .v3-hero-facts li:last-child {
    border-block-end: 0;
  }

  .icw-corporate .v3-discover-button {
    margin: 10px 14px;
  }
}

/* ---- Magazine rows ------------------------------------------------------- */

/* The shipped .icw-corporate h3 rule would shrink these to 1.18rem, which is
   body-heading scale on a card that is carrying a photograph. */
.icw-corporate .card-title {
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
}

.icw-corporate .stay-grid {
  margin-top: clamp(28px, 4vw, 44px);
}

.icw-corporate .stay-facts {
  margin: 10px 0 4px;
}

.icw-corporate .stay-body .button {
  margin-top: 14px;
  align-self: flex-start;
}

/* The collection's cards are fixed-height because ten of them have to line up.
   Two do not, and these carry more copy than a property blurb, so they get to
   be as tall as their content. */
.icw-corporate .stay-card {
  height: auto;
  min-height: 0;
}

/* ...which only works once the PHOTOGRAPH stops voting on the height. Two of
   the ten covers are portrait (800x1067) and the rest are landscape (800x533),
   so an in-flow <picture> made one row 580px tall and the row under it 310px
   for no reason a reader could see. Out of flow, the image contributes no
   intrinsic height, object-fit crops it to whatever the copy needs, and the
   rows line up whichever cover they happen to carry. */
.icw-corporate .stay-media > picture {
  position: absolute;
  inset: 0;
  display: block;
}

.icw-corporate .stay-media {
  min-height: 290px;
}

.icw-corporate .stay-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 3vw, 30px);
}

.icw-corporate .stay-summary {
  display: block;
  margin: 10px 0 0;
  -webkit-line-clamp: none;
}

/* ---- Amenity tiles + host card ------------------------------------------ */

.icw-corporate .amenity-highlight-grid,
.icw-corporate .host-card {
  margin-top: clamp(24px, 3.5vw, 36px);
}

/* ---- Clarity checklist: the detail page's copper checks ------------------ */

/* TWO columns, not auto-fit. auto-fit at this width gives four, which turns
   five items into a 4+1 orphan and squeezes each line to three words. The
   detail page's amenity list is two columns for the same reason. */
.icw-corporate .corp-checklist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 48px;
  max-width: 1000px;
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .icw-corporate .corp-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.icw-corporate .corp-checklist li {
  position: relative;
  padding-inline-start: 28px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.icw-corporate .corp-checklist li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  top: 0.05em;
  color: var(--copper);
  font-weight: 800;
}

/* ---- The live proposal form --------------------------------------------- */

/* The panel is the second column of the proposal band and holds EITHER the
   form or the outcome, so the two states cannot shift the section around. */
.icw-corporate .proposal .proposal-panel {
  min-width: 0;
}

/* The honeypot. Off-screen rather than display:none, because some form fillers
   skip fields they can see are hidden -- and a real person never reaches it:
   it is aria-hidden and out of the tab order. */
.icw-corporate .form-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icw-corporate .form-status {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--copper);
  border-radius: var(--radius-md);
  background: rgba(var(--cream-rgb), 0.94);
  color: var(--ink-soft);
}

.icw-corporate .form-status:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 4px;
}

.icw-corporate .form-status p {
  margin: 0.5rem 0 0;
  line-height: 1.6;
}

.icw-corporate .form-status .form-status-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.25;
}

.icw-corporate .form-status .form-status-meta {
  font-size: 0.9rem;
}

/* A failure is a different colour from a confirmation, and says so in text as
   well: role="alert" carries it to a screen reader, and the copy names the two
   channels that still work rather than just going red. */
.icw-corporate .form-status--error {
  border-inline-start-color: #b3552e;
}

/* An error block sits above the form it belongs to. */
.icw-corporate .form-status + form {
  margin-block-start: 18px;
}

.icw-corporate .field-error {
  margin: 4px 0 0;
  color: #8c3a12;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
}

[data-icw-theme="dark"] .icw-corporate .field-error {
  color: #ffb995;
}

.icw-corporate .form-field--invalid {
  border-color: #b3552e;
  box-shadow: inset 0 0 0 1px #b3552e;
}

.icw-corporate .form-actions {
  grid-column: 1 / -1;
  margin-block-start: 4px;
}

.icw-corporate .form-actions .button {
  width: 100%;
}

@media (min-width: 720px) {
  .icw-corporate .form-actions .button {
    width: auto;
    min-width: 260px;
  }
}


/* ===========================================================================
   2026-08-21 — the date picker, and the end of the cramped column.

   Owner report: "the booking enquiry form does not match the site, where is
   the standard calendar selector, why is it all cramped over to the right?"

   Layout. One card spanning the shell, two comfortable columns inside it. The
   date block takes the first column and spans the rows the six short fields
   occupy in the second, so the calendar sits beside the answers rather than
   above them; the context textarea and the submit span both. Everything is
   placed with grid line numbers, which are writing-direction relative, so the
   Arabic build mirrors without a single [dir="rtl"] override here.
   =========================================================================== */

.icw-corporate .proposal .form-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.icw-corporate .form-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-content: start;
}

@media (min-width: 720px) {
  .icw-corporate .proposal .form-grid {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 18px 24px;
    align-items: start;
  }

  .icw-corporate .form-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.icw-corporate .proposal-dates {
  display: grid;
  gap: 12px;
  align-content: start;
}

.icw-corporate .proposal-dates-native {
  display: grid;
  gap: 12px;
}

/* [hidden] is a UA display:none, and the two rules above would otherwise win
   on specificity and keep showing a block the enhancement has retired. Both
   states need the explicit guard, in both directions. */
.icw-corporate .proposal-dates-native[hidden],
.icw-corporate .proposal-calendar[hidden] {
  display: none;
}

/* The readout pair. .booking-grid's shared rules put a border on :first-child
   and make :last-child span the full row -- correct for the stay card's three
   cells, wrong for these two, and physical rather than logical either way.
   Restated here so the corporate pair is a clean two-up in both directions. */
.icw-corporate .proposal-readout {
  margin-bottom: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.icw-corporate .proposal-readout .booking-field:first-child {
  border-right: 0;
  border-inline-end: 1px solid var(--line);
}

.icw-corporate .proposal-readout .booking-field:last-child {
  grid-column: auto;
  border-top: 0;
}

.icw-corporate .proposal-readout .booking-field strong {
  font-size: 0.86rem;
  font-weight: 700;
}

/* The calendar itself is the shared .availability-calendar surface; it only
   needs its stay-page vertical rhythm neutralised inside a form card. */
.icw-corporate .proposal-calendar .availability-calendar {
  margin: 10px 0 0;
}

.icw-corporate .proposal-calendar .stay-summary-line {
  margin: 10px 0 0;
}

.icw-corporate .proposal-calendar .calendar-clear {
  margin-block-start: 6px;
}

/* A rejected date range has to be legible in the enhanced state too, where the
   invalid native wrapper it used to be carried on is no longer on screen. */
.icw-corporate .proposal-dates--invalid .proposal-readout {
  border-color: #b3552e;
  box-shadow: inset 0 0 0 1px #b3552e;
}

.icw-corporate .proposal-dates .field-error {
  margin: 0;
}