/* Request a Visit — campus, distance and tour booking.
   Prefixed nm- throughout so nothing here can collide with the marketing
   site's own styles, and so this file can be dropped onto production without
   reading the rest of its CSS first. */

/* The form is a two-column grid, so anything inserted into it inherits a
   narrow column and the campus cards end up squeezed against the edge. These
   blocks are full-width sections, not fields. */
.nm-block{margin:22px 0 0;width:100%}
.nm-block, .nm-booking{grid-column:1 / -1}
.nm-h{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:20px;margin:0 0 4px}
.nm-label{display:block;font-size:13px;color:#6E6A61;margin-bottom:2px}
.nm-hint{font-size:13px;color:#9A958A;margin:4px 0 8px}
.nm-err{color:#A8382C;font-size:13px;margin:6px 0 0}
.nm-bad{border-color:#A8382C !important;background:#FBECEA}

.nm-input{width:100%;padding:11px 12px;border:1px solid #E3DED3;border-radius:8px;
  background:#fff;color:#1C1B18;font-size:15px;font-family:inherit;margin-bottom:10px}
.nm-input:focus{outline:2px solid #2F7A55;outline-offset:1px;border-color:#2F7A55}

.nm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#1C1B18;
  color:#fff;border:0;border-radius:99px;padding:11px 20px;font-size:15px;font-family:inherit;cursor:pointer}
.nm-btn:hover{opacity:.88}
.nm-btn:disabled{opacity:.35;cursor:not-allowed}
.nm-ghost{background:transparent;color:#1C1B18;border:1px solid #1C1B18;text-decoration:none}

/* The visit form's own fields. These live here rather than in visit.html's
   <style> block so every change this work makes to the page can be reviewed,
   versioned and rolled back as one file. */
.nm-req{color:#A8382C;font-weight:600}
.nm-reqnote{font-size:13px;color:#9A958A;margin:0}
/* Extended care accepts more than one answer. A multiple select collapses to a
   one-line slot by default, which reads as an ordinary dropdown and hides the
   fact that a second choice is allowed — so it is given room to show its
   options and told to look like the other fields. */
.form select[multiple].nm-multi{min-height:150px;padding:8px;line-height:1.35}
.form select[multiple].nm-multi option{padding:5px 8px;border-radius:5px}
/* Only on screen once there is something to clear, so it never reads as an
   instruction to a parent who has chosen nothing. */
.nm-clear{margin-top:7px;background:none;border:0;padding:0;font:inherit;font-size:13px;
  color:#2F7A55;text-decoration:underline;cursor:pointer}
.nm-clear[hidden]{display:none}

.nm-campuses{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media(max-width:640px){.nm-campuses{grid-template-columns:1fr}}
.nm-cwrap{position:relative}
.nm-tag{position:absolute;top:-8px;right:12px;z-index:1;background:#2F7A55;color:#fff;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:99px}
.nm-campus{display:block;width:100%;text-align:left;border:1px solid #E3DED3;border-radius:12px;
  padding:14px;background:#fff;cursor:pointer;font:inherit}
.nm-campus:hover{border-color:#9A958A}
.nm-campus.on{border-color:#2F7A55;box-shadow:0 0 0 2px #EAF3ED}
.nm-cname{display:block;font-family:Georgia,serif;font-size:17px}
.nm-caddr{display:block;color:#6E6A61;font-size:13.5px;margin-top:1px}
.nm-cdist{display:block;font-size:15px;margin-top:8px}
.nm-cmap{display:inline-block;margin-top:9px;font-size:13.5px;color:#2F7A55;text-decoration:underline}

.nm-booking{border-top:1px solid #E3DED3;padding-top:22px;margin-top:30px}
/* display:flex and display:grid below beat the hidden attribute, which is how
   an element that is supposed to be gone stays on screen. This settles it for
   everything inside the booking block. */
.nm-booking [hidden]{display:none !important}
/* Before a campus is chosen there is nothing truthful to draw, so the calendar
   is not drawn at all. An empty bordered panel under two arrows looks broken;
   this looks like a question. */
.nm-empty{margin-top:14px;border:1px dashed #D8D2C6;border-radius:12px;background:#FAF8F4;
  padding:22px 20px;text-align:center}
.nm-empty p{margin:0 0 13px;font-size:14.5px;color:#6E6A61;line-height:1.45}
.nm-weekhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 8px}
.nm-week{font-size:13.5px;color:#6E6A61}
.nm-nav{border:1px solid #E3DED3;background:#fff;border-radius:8px;width:32px;height:32px;
  cursor:pointer;font-size:15px;color:#1C1B18;font-family:inherit}

.nm-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.nm-day{border:1px solid #E3DED3;background:#fff;border-radius:9px;padding:7px 2px 6px;text-align:center;
  cursor:pointer;font:inherit;line-height:1.15}
.nm-day:hover{border-color:#9A958A}
.nm-day .dw{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#9A958A}
.nm-day .dn{display:block;font-size:15px}
.nm-day .df{display:block;font-size:9.5px;color:#9A958A;margin-top:2px}
.nm-day.on{background:#1C1B18;border-color:#1C1B18;color:#fff}
.nm-day.on .dw,.nm-day.on .df{color:#C9C4B8}
.nm-day.dead{opacity:.38;cursor:not-allowed}

/* One time per row, in a panel that scrolls. Eighteen slots spread across a
   grid is a wall of numbers; a column reads like a diary. The date sticks to
   the top of the panel so it is still on screen at the bottom of the list. */
.nm-panel{margin-top:12px;border:1px solid #E3DED3;border-radius:12px;background:#fff;
  max-height:340px;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative}
.nm-panelhead{position:sticky;top:0;z-index:2;background:#fff;border-bottom:1px solid #E3DED3;
  padding:10px 14px;font-family:Georgia,serif;font-size:15px}
.nm-slots{display:flex;flex-direction:column;padding:8px}
.nm-slot{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  border:1px solid transparent;border-bottom-color:#F0EDE6;border-radius:8px;background:#fff;
  padding:11px 12px;text-align:left;cursor:pointer;font:inherit;font-size:15px}
.nm-slot:last-child{border-bottom-color:transparent}
.nm-time{font-variant-numeric:tabular-nums}
.nm-state{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9A958A}
.nm-slot:hover{background:#FAF8F4;border-color:#E3DED3}
.nm-slot.on{background:#2F7A55;border-color:#2F7A55;color:#fff}
.nm-slot.on .nm-state{color:#D6EADD}
/* Parents are told a time is unavailable, never why. Whether it went to
   another family, to the drive between campuses or to the day's ceiling is
   the school's business, not theirs. */
.nm-slot.no{color:#C3BEB3;cursor:not-allowed;background:#fff}
.nm-slot.no .nm-time{text-decoration:line-through;text-decoration-thickness:1px}
.nm-slot.no:hover{background:#fff;border-color:transparent;border-bottom-color:#F0EDE6}

.nm-alert{margin:0 0 12px;padding:11px 14px;border:1px solid #E4B4AC;background:#FBECEA;
  border-radius:10px;font-size:14px;color:#8A2B20}
.nm-chosen{margin-top:10px;padding:11px 14px;border:1px solid #2F7A55;background:#EAF3ED;
  border-radius:10px;font-size:14px;color:#2A4C3B}

.nm-result{margin-top:18px;border:1px solid #2F7A55;background:#EAF3ED;border-radius:12px;padding:16px 18px}
.nm-result p{margin:0 0 4px}
.nm-ok{font-family:Georgia,serif;font-size:18px;color:#2A4C3B}
.nm-result .nm-btn{margin-top:10px}

/* ── The booking summary, the card that follows you, and the grid ──────────
   The grid is a week of half-hours. It does not fit the 640px column this
   form sits in, so it opens over the page and the form keeps a summary. */

.nm-sumline{font-size:14px;color:#6E6A61;margin:10px 0 0;padding:11px 13px;
  border:1px dashed #E3DED3;border-radius:10px;background:#FCFBF7}
.nm-sumline.has{border-style:solid;border-color:#2F7A55;background:#F1F8F2;color:#2A4C3B}
.nm-sumbtns{display:flex;align-items:center;gap:14px;margin-top:11px;flex-wrap:wrap}
.nm-solid{background:#1C1B18;color:#fff}
.nm-linkish{background:none;border:0;padding:0;font:inherit;font-size:13.5px;
  color:#6E6A61;text-decoration:underline;cursor:pointer}
.nm-alert{background:#FBECEA;border:1px solid #E7C9C4;color:#8B2F24;font-size:14px;
  border-radius:10px;padding:10px 13px;margin:10px 0 0}

/* Above the marketing site's own furniture. The visit page has a sticky
   announcement bar at z-index 100, and at 60/70 the dialog opened UNDERNEATH
   it — the header row was covered and the close button unreachable. */
/* ── The booking block, floating at the side ─────────────────────────────
   Two shapes, chosen by how much room the page leaves beside itself.

   The form is 1016px wide and centred, so on a 1440px screen there is a 212px
   gutter either side — enough for a 190px card that never touches a field. On a
   1366px laptop that gutter is 175px and the same card would sit on top of the
   right-hand column, so below 1400px it becomes a tab against the edge instead:
   still always visible, still one click to the calendar, and narrow enough that
   it cannot cover anything at any width. */
.nm-bookside{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:900}
/* Filled rather than outlined, because a white card on a near-white page is
   furniture and this is meant to be the thing a parent notices. Width is
   capped by the gutter, not by taste: the form is 1016px centred, so 190px is
   the most that fits beside it at 1440px without touching a field. Wider
   screens have more gutter and get a wider card. */
/* Brand yellow, with ink on top rather than white: yellow this saturated has
   nowhere near the contrast for white text, and a booking prompt nobody can
   read is worse than a quiet one. Black on yellow is also the logo's own
   pairing. */
.nm-sidecard{display:none;width:190px;background:#F8CE33;color:#141414;border:0;border-radius:16px;
  padding:18px 17px 19px;box-shadow:0 14px 40px rgba(120,92,0,.30)}
.nm-bookside.has .nm-sidecard{background:#F8CE33;box-shadow:0 14px 40px rgba(120,92,0,.42)}
.nm-bookh{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:21px;display:block;
  line-height:1.2;color:#141414}
.nm-bookside .nm-sumline{margin:7px 0 0;padding:0;border:0;background:none;font-size:13px;
  color:rgba(20,20,20,.78);line-height:1.45}
.nm-bookside.has .nm-sumline{color:#141414;font-weight:500}
.nm-bookside .nm-sumbtns{margin-top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
/* Ink on yellow: the strongest contrast available inside this card. */
.nm-bookside .nm-btn{width:100%;padding:12px 12px;font-size:15px;background:#141414;color:#fff;font-weight:500}
.nm-bookside .nm-btn:hover{background:#000;opacity:1}
.nm-bookside .nm-linkish{color:rgba(20,20,20,.75)}
.nm-bookside .nm-alert{margin:9px 0 0;padding:8px 10px;font-size:12.5px;background:#fff;color:#8B2F24;border:0}
.nm-sidex{position:absolute;top:-10px;right:-8px;width:24px;height:24px;border-radius:50%;
  background:#fff;border:1px solid #E3DED3;color:#6E6A61;font-size:15px;line-height:1;cursor:pointer;
  display:none;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.nm-sidex:hover{color:#1C1B18}

/* the collapsed tab, for anything narrower */
.nm-sidetab{display:flex;align-items:center;gap:10px;background:#F8CE33;color:#141414;border:0;cursor:pointer;
  border-radius:12px 0 0 12px;padding:20px 13px;font:inherit;font-size:14.5px;font-weight:600;letter-spacing:.02em;
  writing-mode:vertical-rl;transform:rotate(180deg);box-shadow:-5px 0 22px rgba(120,92,0,.32)}
.nm-sidedot{width:8px;height:8px;border-radius:50%;background:#141414;flex:none}
.nm-sidetab:hover{background:#FFD84A}

@media (min-width: 1400px) {
  .nm-bookside{right:14px}
  .nm-sidecard{display:block}
  .nm-sidex{display:flex}
  .nm-sidetab{display:none}
}
/* More gutter, more card. At 1560 the space beside the form is 272px. */
@media (min-width: 1560px) {
  .nm-sidecard{width:224px;padding:20px 19px 21px}
  .nm-bookh{font-size:23px}
  .nm-bookside .nm-sumline{font-size:13.5px}
}

/* The grid, inline in the form directly under the campus tiles.

   This was a modal over a dimmed page. It is now a panel that belongs to the
   Campus section, so it is styled as a card in the form rather than a sheet
   floating above it: a hairline border and a soft shadow instead of the deep
   one that sold the old overlay, and the full width of the twelve-column cell
   it sits in rather than a centred 780px box.

   .nm-dlgbody keeps its overflow:auto and gains a height cap. Without the cap
   an eight-week diary would push the Submit button several screens down; with
   it the week scrolls inside the card and the sticky day header (.nm-ghead,
   top:0) still has a scroll container to stick to. Remove the cap and that
   header sticks to the window instead, under the announcement bar. */
.nm-picker{margin:0 0 4px}

/* The picker is open, live and full of real times from the first paint.

   There was a dimmed "waiting" state here until 16 Aug 2026, for the days when
   the grid could show nothing until a campus had been chosen. One host and one
   shared diary ended that: the two campus grids were compared day by day over
   four weeks and did not differ in a single cell, so greying the panel behind
   that question was dressing a dependency the page no longer has. */
/* The blank time column of the placeholder. Bars, not invented times — see
   drawSkeleton() for why the rows are deliberately empty. */
.nm-skelbar{display:block;height:7px;width:32px;border-radius:99px;background:#E6E1D6}
.nm-dlg{background:#fff;border-radius:16px;width:100%;
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid #E6E1D6;box-shadow:0 10px 26px rgba(24,22,19,.07)}
.nm-dlg:focus{outline:none}
.nm-dlghead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:15px 18px 12px;border-bottom:1px solid #EFEBE2}
.nm-dlghead b{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:20px}
.nm-dlgsub{font-size:13px;color:#9A958A;margin:2px 0 0}
.nm-dlgx{background:none;border:0;font-size:26px;line-height:1;color:#9A958A;cursor:pointer;padding:0 4px}
.nm-dlgx:hover{color:#1C1B18}
.nm-dlg .nm-weekhead{display:flex;align-items:center;justify-content:center;gap:14px;padding:11px 16px}
.nm-dlgbody{padding:0 18px 16px;overflow:auto;flex:1;min-height:0;max-height:min(52vh,430px)}
.nm-dlgfoot{border-top:1px solid #EFEBE2;background:#FCFBF7;padding:12px 18px;
  display:flex;align-items:center;gap:14px}
.nm-dlgmsg{flex:1;font-size:14px;color:#1C1B18}

/* Rows that do not touch.

   The cells used to sit flush against each other, sharing hairline borders —
   right for a diary of half-hours, where the wall of blocks reads as a day.
   With four starts two hours apart it read as something else entirely: a solid
   bar from the 10:00 label down to the 12:00 label looks like a booking that
   runs from ten until twelve, and a parent could reasonably think they were
   claiming two hours of the morning. The tour is thirty minutes.

   So the blocks are separated and rounded — a gap says "these are separate
   choices" where a shared border says "this is one continuous thing" — and
   .nm-gtime spells the length out underneath the start time, because the shape
   of a grid should not be the only thing telling a parent what they are
   booking. */
.nm-grid{width:100%}
.nm-grow{display:grid;grid-template-columns:82px repeat(7,1fr);gap:6px}
.nm-grow + .nm-grow{margin-top:6px}
.nm-ghead{position:sticky;top:0;z-index:2;background:#fff;padding-bottom:8px}
.nm-ghead span{text-align:center;padding:6px 2px;font-size:12px;line-height:1.25}
.nm-ghead i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#9A958A}
.nm-ghead b{font-weight:500;font-size:14px}
.nm-gtime{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  padding-right:10px;font-variant-numeric:tabular-nums;line-height:1.15}
.nm-gtime b{font-weight:500;font-size:12.5px;color:#6E6A61}
.nm-gtime i{font-style:normal;font-size:9.5px;color:#B3ADA1;letter-spacing:.03em;margin-top:1px}
.nm-cell{height:32px;border:0;border-radius:6px;background:#F1EEE8;padding:0;cursor:not-allowed}
.nm-cell.free{background:#2F7A55;cursor:pointer}
.nm-cell.free:hover{background:#2A4C3B}
.nm-cell.on{background:#F8CE33;box-shadow:inset 0 0 0 2px #1C1B18}
.nm-cell.free:focus-visible{outline:2px solid #1C1B18;outline-offset:2px}
.nm-glegend{display:flex;gap:16px;align-items:center;margin-top:12px;font-size:12.5px;color:#9A958A}
.nm-glegend span{display:inline-flex;align-items:center;gap:6px}
.nm-glegend i.k{width:13px;height:13px;border-radius:3px;background:#F4F2EE;display:inline-block}
.nm-glegend i.k.free{background:#2F7A55}
.nm-glegend i.k.on{background:#F8CE33}

/* On a phone the card becomes a bar across the bottom and the grid becomes a
   sheet. Seven columns still fit: the cells carry colour, not text. */
@media (max-width: 700px) {
  .nm-sidetab{padding:14px 9px;font-size:13px}

  .nm-dlgbody{max-height:min(58vh,380px)}
  .nm-grow{grid-template-columns:60px repeat(7,1fr);gap:4px}
  .nm-grow + .nm-grow{margin-top:4px}
  .nm-gtime{padding-right:6px}
  .nm-gtime b{font-size:11px}
  .nm-gtime i{font-size:9px}
  .nm-cell{height:34px}
  .nm-dlgfoot{flex-wrap:wrap}
  .nm-dlgfoot .nm-btn{width:100%}
}

/* Any nm- element that is display:flex or :grid needs this spelled out, or the
   hidden attribute is silently ignored. The ZIP row was flex and therefore on
   screen for every parent even though the script had marked it hidden — a
   comparison that cannot work, offered to everyone. Listed explicitly rather
   than as a blanket [hidden] rule so it cannot fight the host page's own CSS. */
.nm-bookside[hidden], .nm-picker[hidden],
.nm-camps[hidden], .nm-chips[hidden]{display:none !important}


/* ── The condensed Request-a-tour layout ─────────────────────────────────
   The form was one 640px column inside a 1080px page — seventeen fields,
   seventeen rows, and 440px of unused width beside every one of them. Here it
   is a twelve-column grid at the page's own width. tour.js does the
   re-parenting; this file does the shape. */

/* `form.form`, not `.form`, and the extra specificity is the whole point:
   visit.html carries its own <style> block AFTER the link to this file, and it
   pins .form to a 640px single-column grid. Same specificity, later in the
   cascade — so a plain `.form` rule here loses and the grid packs twelve
   columns into 640px. Element+class beats class wherever it sits. */
form.form{width:100%;max-width:none;grid-template-columns:minmax(0,1fr)}
.nm-fgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:13px 16px;width:100%}
.nm-fgrid > div{min-width:0}          /* or a long select stretches its column */
/* Two columns is the narrowest a field gets: enough for a gender select or a
   first name, and it exists so the child's row can be one line of five. */
.nm-c2{grid-column:span 2}
.nm-c3{grid-column:span 3}
.nm-c4{grid-column:span 4}
.nm-c5{grid-column:span 5}
.nm-c6{grid-column:span 6}
.nm-c7{grid-column:span 7}
.nm-c8{grid-column:span 8}
/* 9, 10 and 11 exist because a field given a span with no rule behind it does
   not fall back to something sensible — it collapses to its own content width.
   Moving Gender to the child section left Referral as the only field on its
   row, span 9, and it shrank to a stub with a wrapped label. */
.nm-c9{grid-column:span 9}
.nm-c10{grid-column:span 10}
.nm-c11{grid-column:span 11}
.nm-c12{grid-column:span 12}

.nm-grouphd{grid-column:span 12;display:flex;align-items:baseline;gap:12px;margin-top:12px}
.nm-grouphd h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:19px;margin:0}
.nm-grouphd .nm-l{flex:1;border-top:1px solid #EFEBE2}
.nm-grouphd .nm-reqnote{margin:0;font-size:12.5px;color:#9A958A}
.nm-fgrid label{display:block;font-size:12.5px;color:#6E6A61;margin-bottom:5px}
.nm-inlinehint{color:#9A958A;margin-left:8px}
.nm-fgrid input,.nm-fgrid select,.nm-fgrid textarea{width:100%}
.nm-fgrid textarea{min-height:60px}
.nm-off{display:none !important}

/* extended care */
.nm-chips{display:flex;flex-wrap:wrap;gap:8px}
.nm-chip{border:1px solid #E3DED3;background:#fff;border-radius:99px;padding:7px 14px;
  font:inherit;font-size:13.5px;cursor:pointer;color:#1C1B18}
.nm-chip:hover{border-color:#B4AEA2}
.nm-chip.on{background:#1C1B18;color:#fff;border-color:#1C1B18}

/* Campus, as two plain choices. No distance chrome, no badges — two buildings
   in one town, a name, an address, and which one you picked. */
.nm-camps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nm-cwrap{position:relative}
.nm-camp{position:relative;width:100%;text-align:left;border:1px solid #E3DED3;border-radius:11px;
  background:#fff;padding:13px 14px 13px 40px;cursor:pointer;font:inherit;transition:.14s}
.nm-camp:hover{border-color:#B4AEA2}
.nm-camp.on{border-color:#2F7A55;background:#F1F8F2;box-shadow:inset 0 0 0 1px #2F7A55}
/* Unanswered, after the parent has pressed a button that needed an answer.
   The message alone sat beside a field nobody can see, so the red belongs on
   the tiles, which are the thing they actually have to touch. The generic
   .nm-bad wash is cancelled first: on a grid container it paints nothing but
   the gaps between the tiles, which reads as a rendering fault. */
.nm-camps.nm-bad{background:none}
.nm-camps.nm-bad .nm-camp{border-color:#C88B82;background:#FDF7F6}
.nm-camps.nm-bad .nm-tick{border-color:#C88B82}
.nm-camp b{display:block;font-size:15px;font-weight:600;color:#1C1B18}
.nm-camp span{display:block;font-size:12.5px;color:#6E6A61;margin-top:2px}
/* A radio-style mark, so "which one is chosen" is legible without relying on
   the fill colour alone. */
.nm-tick{position:absolute;left:14px;top:15px;width:16px;height:16px;border-radius:50%;
  border:1.5px solid #C9C3B7;background:#fff}
.nm-camp.on .nm-tick{border-color:#2F7A55;background:#2F7A55;
  box-shadow:inset 0 0 0 3px #fff}
.nm-cmap{position:absolute;bottom:12px;right:13px;font-size:12px;color:#6E6A61;text-decoration:none}
.nm-cmap:hover{color:#2F7A55;text-decoration:underline}

/* the booking summary, beside the comments box */
.nm-booking{border:1px dashed #E3DED3;border-radius:12px;background:#fff;padding:13px 15px;
  display:flex;flex-direction:column;gap:2px}
.nm-bookh{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:17px}
.nm-booking .nm-sumline{margin:6px 0 0;padding:0;border:0;background:none;font-size:13.5px}
.nm-booking .nm-sumline.has{color:#2A4C3B}
.nm-booking .nm-sumbtns{margin-top:auto;padding-top:11px}
.nm-booking .nm-btn{width:100%}
.nm-subrow{margin-top:18px}

/* One column on a phone. Four fields across is a desktop luxury; the point of
   the grid there is only that the page is not seventeen screens long. */
@media (max-width: 860px) {
  .nm-c2,.nm-c3,.nm-c4,.nm-c5,.nm-c6,.nm-c7,.nm-c8{grid-column:span 6}
  .nm-c9,.nm-c10,.nm-c11{grid-column:span 12}
}
@media (max-width: 560px) {
  .nm-fgrid{gap:11px 12px}
  .nm-c2,.nm-c3,.nm-c4,.nm-c5,.nm-c6,.nm-c7,.nm-c8,.nm-c9,.nm-c10,.nm-c11,.nm-c12{grid-column:span 12}
  .nm-camps{grid-template-columns:1fr}
}