/* ==========================================================================
   Fonts
   ========================================================================== */

/* BT Steinhart Medium: everything set in capitals (headings, nav, buttons, labels).
   Subset to Latin; it has no ₹, so prices stay in Helvetica */
@font-face {
  font-family: "BT Steinhart";
  src: url("../fonts/steinhart-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Helvetica Now Display: everything read as a sentence (paragraphs, titles, data, contact) */
@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/helvetica-now-display-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/helvetica-now-display-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Base
   ========================================================================== */

html,
body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
  word-wrap: break-word;
}

body {
  font-family: "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: #000000;
  background-color: #FFFFFF;
  overflow-x: hidden;
  /* clip, not hidden, where supported: "hidden" on body can stop Safari scrolling the page at
     all; clip hides sideways overflow the same way without that */
  overflow-x: clip;
}

:root {
  scroll-behavior: auto;
}

/* Bootstrap gives lists, paragraphs and figures a bottom margin that the * reset above can't
   override (an element selector outranks *); every list on this site sets its own spacing */
ul,
ol,
dl,
figure,
blockquote {
  margin: 0;
  padding: 0;
}

a,
a:hover {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

b,
strong {
  font-weight: 500;
}

/* keyboard users still get a visible focus ring; mouse clicks don't */
:focus {
  outline: none;
}

:focus-visible {
  outline: 1px solid #2D4385;
  outline-offset: 3px;
}

::selection {
  background-color: #2D4385;
  color: #FFFFFF;
}

/* ==========================================================================
   Forms (square, 1px lines, Helvetica for what people type)
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 16px 20px;
  border: 1px solid #CCCCCC;
  border-radius: 0;
  background-color: #FFFFFF;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  font-family: "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: #000000;
  transition: border-color 0.3s ease;
}

/* focus: a 2px brand-blue line (the kit's), drawn inside so the field doesn't shift */
input:focus,
select:focus,
textarea:focus {
  border-color: #2D4385;
  box-shadow: inset 0 0 0 1px #2D4385;
  outline: none;
}

textarea {
  min-height: 140px;
  resize: vertical;
}

::placeholder {
  color: #6E6E73;
  opacity: 1;
}

button {
  font-family: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
}

/* ==========================================================================
   Grid
   ========================================================================== */

/* the design's gutter is 30px. This Bootstrap build pads every column a flat 15px but pulls
   the row and the container in by 12px (1.5rem), which leaves content 3px off the grid, so
   the gutter is set to 30px on both and the three line up */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.row {
  --bs-gutter-x: 30px;
}

/* ==========================================================================
   Helpers
   ========================================================================== */

/* 100 inside coloured bands and between sections on white (the kit allows up to 160) */
.section-padding {
  padding: 100px 0;
}

.section-padding-lg {
  padding: 160px 0;
}

.bg-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* stops the page scrolling behind the open mobile menu */
body.noscroll {
  overflow: hidden;
}

/* ==========================================================================
   Lenis smooth scroll (the classes Lenis 1.3 puts on <html>; its own lenis.css)
   ========================================================================== */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

/* a box that scrolls on its own (menu, dropdown, modal) keeps its native scroll */
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

/* an embedded map or video mustn't swallow the wheel while the page glides past it */
.lenis.lenis-smooth iframe {
  pointer-events: none;
}


/* ==========================================================================
   Reveals (app/common.js)
   ========================================================================== */

/* an image reveal's sliding layer: the frame's <picture>, or the span the script wraps round a
   bare <img> (app/common.js). It clips, so the photo held still inside it is uncovered from
   the bottom as the layer rises into the frame */
.reveal_image_inner {
  display: block;
  width: 100%;
  height: 100%;
}

[data-reveal="image"] > picture,
.reveal_image_inner {
  overflow: hidden;
}

/* with the reveal running, the frame's grey placeholder would show as a box above the rising
   photo, so the frame stays clear (without JavaScript the placeholder is kept) */
.js [data-reveal="image"] {
  background-color: transparent;
}

/* hides each heading/paragraph line while it rises; the script removes these once the
   text has landed */
.reveal_line_mask {
  display: block;
  overflow: hidden;
}

/* image frames that open on reveal: the photo settles from a slight zoom inside them */
[data-reveal="image"] {
  overflow: hidden;
}

[data-reveal="image"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}