/* ==========================================================================
   JLink — static site
   Layout reproduces Squarespace's fluid-engine grid: 24 content columns
   plus a gutter column each side (grid lines 1–27), row height =
   container-width * 0.0215. Block coordinates are taken from the live site.
   ========================================================================== */

:root {
  /* Brand palette (from site.css HSL values) */
  --navy:  #224D9E;   /* --darkAccent  219.19,64.58%,37.65% */
  --blue:  #00A3E0;   /* --accent      196.34,100%,43.92%   */
  --teal:  #6FC1C2;   /* --lightAccent 180.72,40.49%,59.8%  */
  --black: #000000;
  --white: #FFFFFF;
  --green: #6EB98B;   /* read from the live site */

  --text: var(--black);
  --gutter: 4vw;                                  /* --pagePadding */
  --site-max: 1400px;                             /* --maxPageWidth */

  --font: "Sarabun", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font);
  font-size: 1.1rem;          /* --normal-text-size */
  /* Unitless so it recomputes per element. With `1.8em` the ratio is
     resolved once against the body's 17.6px and inherited as a fixed
     31.7px, which under-spaces every larger block of text. */
  line-height: 1.8;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--blue); }

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.36;          /* live: 27.76px font, 37.78px leading */
  margin: 0 0 0.5em;          /* live: 13.88px under a 27.76px h2 */
}
h1 { font-size: 3rem; }
h2 { font-size: 1.735rem; }   /* live: 27.76px */
h3 { font-size: 1.8rem; }
p  { margin: 0 0 1em; }

/* The live site puts the 4vw gutter OUTSIDE the 1400px content column, so
   the usable width is a full 1400px. Expressed as border-box + a larger
   max-width -- content-box would make this 100% + 8vw wide and overflow
   the viewport on phones. */
.wrap {
  width: 100%;
  max-width: calc(var(--site-max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip { position: absolute; left: -9999px; background: var(--blue); color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ---------- The fluid-engine grid ---------- */

.fe {
  /* Columns are sized from 100% (the element's real width). 100vw includes
     the scrollbar, which made the grid ~15px wider than the viewport and
     left a clipped white strip down the right edge. --row can stay on vw:
     the error there is under half a pixel per row. */
  --container-width: min(var(--site-max), calc(100vw - var(--gutter) * 2));
  --cell: calc(min(var(--site-max), calc(100% - var(--gutter) * 2)) / 24);
  --row: calc(var(--container-width) * 0.0215);
  display: grid;
  position: relative;
  grid-template-columns:
    minmax(var(--gutter), 1fr)
    repeat(24, minmax(0, var(--cell)))
    minmax(var(--gutter), 1fr);
  overflow-x: clip;
}
.fe > * { min-width: 0; }

/* Images are taken out of flow. In normal flow a 2679x1910 file rendered
   760px wide reports a 542px natural height and stretches its grid rows,
   which throws off every row below it. Absolute positioning lets the grid
   define the box and the image fill it. */
.fe-fill { position: relative; }
.fe-fill img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* ---------- Header ----------
   Full-bleed container with the nav centred in the viewport
   (Squarespace header layout: navCenter). Height 103px matches the
   section padding-top on the live site. */

/* Not sticky -- the live header scrolls away with the page. */
.site-header { background: var(--black); position: relative; z-index: 60; }
.site-header .wrap {
  box-sizing: border-box;
  max-width: none;
  padding: 0 4vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* Live header: 50px logo + ~1.72vw padding top and bottom, so the bar
     grows with the window (115px at 1920 wide, 102px at 1534). */
  min-height: calc(50px + 3.44vw);
}
.logo { justify-self: start; }
.logo img { width: 125px; }   /* live: 125 x 50 */
.nav { justify-self: center; }

.nav-toggle {
  display: none; margin-left: auto; background: none;
  border: 1px solid rgba(255,255,255,.25); border-radius: 4px;
  color: #fff; font: inherit; padding: 8px 12px; cursor: pointer;
}
.nav ul { display: flex; gap: 27px; list-style: none; margin: 0; padding: 0; }
.nav a {
  color: var(--white); text-decoration: none;
  line-height: 1.8;
  font-weight: 800; font-size: 1.1rem;      /* --site-navigation-font */
  text-transform: uppercase; letter-spacing: 0;
  padding: 4px 0;
  transition: color .15s ease;
}
/* The live site marks hover and the current page with a colour shift to
   the brand teal -- no underline. */
.nav a:hover, .nav a[aria-current="page"] { color: var(--teal); }

/* ---------- Hero (section 668b6597, 22 rows, theme dark-bold = navy) ---------- */

.hero { background: var(--navy); grid-template-rows: repeat(22, minmax(var(--row), auto)); }

.hero .sh-teal  { grid-area: 1/14/12/27; background: var(--teal); z-index: 1; }
.hero .sh-blue1 { grid-area: 12/1/23/14; background: var(--blue); z-index: 2; }
.hero .sh-blue2 {
  grid-area: 12/14/23/27; background: var(--blue); z-index: 3;
  /* clips the blue so the navy section background shows through as a
     triangle in the lower-right corner -- live value */
  clip-path: polygon(0 0, 100% 0, 68% 100%, 0 100%);
}

.hero .hero-title {
  grid-area: 3/2/9/14; z-index: 6;
  display: flex; align-items: flex-end;
}
.hero h1 {
  color: var(--white); margin: 0;
  /* Scales with the content column and caps at the live value of 77.3px
     once the container hits its 1400px max. */
  font-size: min(4.83rem, 5.08vw);
  line-height: 1;             /* live: 77.1px font, 77.1px leading */
}

.hero .hero-copy {
  grid-area: 13/2/21/11; z-index: 4;
  display: flex; align-items: flex-start;
}
.hero .hero-copy p { color: var(--white); font-size: 1.2rem; margin: 0; }

.hero .hero-img { grid-area: 4/13/20/26; z-index: 5; }

/* ---------- Pillars + list (section 668b6251, classic 5 / 1 / 6 columns) ---------- */

.pillars-section { padding: 3.8vmax 0; }
.pillars-section ul { padding-left: 40px; margin: 1em 0 0; }
.pillars-section li { margin-bottom: 8.84px; }   /* live value */
.pillars-grid {
  display: grid;
  grid-template-columns: 5fr 1fr 6fr;
  gap: 0; align-items: center;
}
/* Squarespace's classic rows carry a 17px cell gutter; applied to the text
   column only, since the icon column starts flush with the content edge. */
.pillars-text { padding-left: 17px; }
/* Always three across, like the live gallery block. The gap shrinks before
   the icons do, so they never wrap to a second row. */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;                        /* live gallery gutter */
  max-width: 565px;                 /* 3 x 155 + 2 x 50 */
}
.pillar { min-width: 0; }
.pillar img { width: 155px; max-width: 100%; height: 155px; object-fit: contain; margin: 0 auto; }
.pillar-title { font-size: 14px; margin-top: 7px; text-align: center; line-height: 1.4; }

/* ---------- Feature sections (13 rows, theme dark = navy) ---------- */

.feature { background: var(--navy); grid-template-rows: repeat(13, minmax(var(--row), auto)); color: var(--white); }
.feature h2 { color: var(--white); }

/* image right variant */
.feature .img-right { grid-area: 1/14/14/27; z-index: 5; }
.feature .img-right ~ .sh-blue { grid-area: 1/7/3/14;  background: var(--blue); z-index: 4; }
.feature .img-right ~ .sh-teal { grid-area: 1/6/3/7;   background: var(--teal); z-index: 2;
  clip-path: polygon(100% 0, 0 0, 100% 100%); }
.feature .img-right ~ .f-text  { grid-area: 4/1/11/14; z-index: 0; }

/* image left variant */
.feature .img-left { grid-area: 1/1/14/14; z-index: 5; }
.feature .img-left ~ .sh-blue { grid-area: 1/14/3/19;  background: var(--blue); z-index: 4; }
.feature .img-left ~ .sh-teal { grid-area: 1/19/3/20;  background: var(--teal); z-index: 2;
  clip-path: polygon(100% 0, 0 0, 0 100%); }
.feature .img-left ~ .f-text  { grid-area: 4/14/11/27; z-index: 0; }

.f-text { display: flex; flex-direction: column; justify-content: center; padding: 0 14%; }
.f-text ul { margin: 0; padding-left: 1.2em; }
.f-text li { margin-bottom: .4em; font-size: 1.2rem; }

/* ---------- CTA section (66aadf3d, 15 rows) ---------- */

.cta { background: var(--navy); grid-template-rows: repeat(15, minmax(var(--row), auto)); }
.cta .sh-teal  { grid-area: 1/14/9/27;  background: var(--teal);  z-index: 2; }
.cta .sh-green { grid-area: 9/14/16/27; background: var(--green); z-index: 3; }
.cta .sh-blue  { grid-area: 1/7/3/14;   background: var(--blue);  z-index: 4; }
.cta .sh-teal2 { grid-area: 1/6/3/7;    background: var(--teal);  z-index: 2;
  clip-path: polygon(100% 0, 0 0, 100% 100%); }
.cta .cta-img  { grid-area: 3/14/14/27; z-index: 5; position: relative; }
.cta .cta-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
}
.cta .cta-text {
  grid-area: 4/1/13/14; z-index: 0;
  display: flex; align-items: center; padding: 0 14%;
}
.cta h3 { color: var(--white); margin: 0; }

/* ---------- Connect page body ----------
   Live: theme "light" (teal background), 12 rows.
   About block 1/2/12/12, contact block 1/14/13/26.                     */

.connect-body {
  background: var(--teal);
  grid-template-rows: repeat(12, minmax(var(--row), auto));
  padding: 6.6vmax 0;        /* live: 126.72px at 1920 wide */
}
.connect-about   { grid-area: 1/2/12/12;  z-index: 0; }
.connect-contact { grid-area: 1/14/13/26; z-index: 2; }
.connect-body h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 .6em; }
/* The About copy uses the small text size, not the body default. */
.connect-about p { font-size: 13.7px; line-height: 1.8; margin-bottom: 16px; }

@media (max-width: 767px) {
  .connect-body { grid-template-rows: repeat(20, minmax(24px, auto)); }
  .connect-about   { grid-area: 1/2/7/10;  }
  .connect-contact { grid-area: 7/2/21/10; }
}

/* ---------- Contact (Connect page) ---------- */

.section { padding: 3.8vmax 0; }
.section-teal { background: var(--teal); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }

.email-plain {
  font-size: 1.5rem; font-weight: 500; background: var(--white);
  border-left: 5px solid var(--navy); padding: 16px 20px; margin: 20px 0 12px;
  user-select: all; -webkit-user-select: all;
}
.email-note { font-size: .9rem; margin: 0; }
.contact-card { background: var(--white); padding: 28px; margin-top: 24px; }
.contact-card h3 { font-size: 1.2rem; margin-top: 0; }

/* ---------- Footer ----------
   Same fluid-engine grid as the page sections, 6 rows with an 11px gap.
   Live block coordinates: logo 1/2/3/5, address 3/2/6/13, nav 6/8/7/20. */

.site-footer { background: var(--black); color: var(--white); }
.site-footer.fe {
  grid-template-rows: repeat(6, minmax(var(--row), auto));
  gap: 11px;
  padding: 60px 0;
  /* The 11px gaps have to come OUT of the 1400px content width, or the
     23 gaps push the outer gutters in and the logo drifts left. */
  --cell: calc((min(var(--site-max), calc(100% - var(--gutter) * 2)) - 11px * 23) / 24);
}
.foot-logo { grid-area: 1/2/3/5;  align-self: center; }
.foot-logo img { width: 165px; }
.foot-addr { grid-area: 3/2/6/13; align-self: center; }
.foot-nav  { grid-area: 6/8/7/20; align-self: center; text-align: center; }

.site-footer p { font-size: 13.7px; line-height: 1.8; margin: 0; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.foot-nav a {
  font-size: 13.7px; font-weight: 600; text-transform: uppercase;
  margin: 0 12px;
}

/* ---------- Mobile ----------------------------------------------------
   Squarespace ships a SEPARATE 8-column mobile grid with its own block
   coordinates (not a stacked version of the desktop one). Row height is a
   flat 24px minimum. Coordinates below are taken from the live markup.  */

@media (max-width: 767px) {
  .fe {
    --gutter: 6vw;                                  /* --sqs-mobile-site-gutter */
    --container-width: calc(100vw - var(--gutter) * 2);
    --cell: calc((100% - var(--gutter) * 2) / 8);
    grid-template-columns:
      minmax(var(--gutter), 1fr)
      repeat(8, minmax(0, var(--cell)))
      minmax(var(--gutter), 1fr);
  }

  /* Hero */
  .hero { grid-template-rows: repeat(27, minmax(24px, auto)); }
  .hero .hero-title { grid-area: 3/2/7/10;   align-items: flex-start; }
  .hero .hero-copy  { grid-area: 7/2/15/10; }
  .hero .hero-img   { grid-area: 17/2/27/10; }
  .hero .sh-teal    { grid-area: 16/6/22/11; }
  .hero .sh-blue1   { grid-area: 22/1/28/6;  }
  .hero .sh-blue2   { grid-area: 22/6/28/11; }
  .hero .wedge      { display: none; }
  .hero h1 { font-size: 7.2vw; line-height: 1.15; }
  .hero .hero-copy p { font-size: 1.135rem; }   /* live: 18.16px */

  /* Feature sections: image on top, colour strip, then text */
  .feature { grid-template-rows: repeat(23, minmax(24px, auto)); }
  .feature .img-right, .feature .img-left { grid-area: 1/1/10/11; }
  /* image-right sections put the blue bar on the right */
  .feature .img-right ~ .sh-blue { grid-area: 10/5/12/11; }
  .feature .img-right ~ .sh-teal { grid-area: 10/4/12/5; clip-path: polygon(100% 0, 0 0, 100% 100%); }
  .feature .img-right ~ .f-text  { grid-area: 13/1/22/11; }
  /* image-left sections mirror it */
  .feature .img-left ~ .sh-blue  { grid-area: 10/1/12/7; }
  .feature .img-left ~ .sh-teal  { grid-area: 10/7/12/8; clip-path: polygon(0 0, 100% 0, 0 100%); }
  .feature .img-left ~ .f-text   { grid-area: 13/2/24/10; }
  .f-text { padding: 0; }
  .f-text li { font-size: 1.05rem; }

  /* CTA */
  .cta { grid-template-rows: repeat(21, minmax(24px, auto)); }
  .cta .cta-img  { grid-area: 2/2/12/10; }
  .cta .sh-teal  { grid-area: 1/1/7/11;  }
  .cta .sh-blue  { grid-area: 4/4/6/10;  }
  .cta .sh-teal2 { grid-area: 4/3/6/4;   }
  .cta .sh-green { grid-area: 7/1/13/11; }
  .cta .cta-text { grid-area: 14/1/20/11; padding: 0 6vw; }
  .cta .wedge    { display: none; }

  /* Header: logo left, two-line burger right (menu-icon doubleLineHamburger) */
  .site-header .wrap {
    grid-template-columns: auto 1fr;
    min-height: 78px; padding: 0 6vw;
  }
  .logo img { width: 118px; }
  .nav-toggle {
    display: block; justify-self: end;
    width: 32px; height: 18px; padding: 0;
    border: 0; background: none; font-size: 0; position: relative;
  }
  .nav-toggle::before, .nav-toggle::after {
    content: ""; position: absolute; left: 0; right: 0;
    height: 2px; background: var(--white);
  }
  .nav-toggle::before { top: 3px; }
  .nav-toggle::after  { top: 12px; }

  .nav { display: none; grid-column: 1 / -1; justify-self: stretch; padding-bottom: 14px; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.18); }

  /* Other sections */
  .pillars-grid, .two-col { grid-template-columns: 1fr; gap: 32px; }
  .pillars { gap: 50px; max-width: none; }
  .pillar img { width: 100%; height: auto; }   /* ~83px, as live */
  .pillar img { width: 100%; }
}

/* ---------- Page banner (Services / Connect) ----------
   Live coordinates: 14 rows, navy section background.                 */

.banner { background: var(--navy); grid-template-rows: repeat(14, minmax(var(--row), auto)); }
.banner .b-teal  { grid-area: 1/12/12/14;  background: var(--teal);  z-index: 1; }
/* Top-aligned: the live block uses justify-content:flex-start, so the
   text sits at the top of its 5-row block rather than centred in it. */
.banner .b-title { grid-area: 5/2/10/10;   z-index: 3; display: flex; align-items: flex-start; }
/* Connect's title block is narrower than Services' -- live: 5/2/10/7. */
.banner-connect .b-title { grid-area: 5/2/10/7; }
/* Custom focal point set in Squarespace -- keeps her head clear of the
   header instead of centre-cropping. */
.banner-connect .b-photo img { object-position: 50% 29.6%; }
.banner .b-blue  { grid-area: 12/2/15/12;  background: var(--blue);  z-index: 2; }
.banner .b-green { grid-area: 12/12/15/14; background: var(--green); z-index: 3; }
.banner .b-photo { grid-area: 1/14/15/27;  z-index: 4; }
/* Sized by script.js to fill its block -- see the note there. The value
   below is only a fallback for when JS is unavailable. */
.banner h1 {
  color: var(--white); margin: 0;
  font-size: min(4.83rem, 5.08vw); line-height: 1;
  white-space: nowrap;
  /* inline-block so its width is the TEXT width, not the container width --
     the fitting script in script.js depends on that. */
  display: inline-block;
}

/* Full-bleed photo bands between the text sections */
.photo-band { min-height: 320px; background-position: center; background-size: cover; background-repeat: no-repeat; }

/* Text sections sit in the left portion of a white section */
.text-section { padding: 3.8vmax 0; }
.text-section .wrap > div { max-width: 62%; }
.text-section h4 { font-size: 1.2rem; font-weight: 700; margin: 0 0 1em; }
.text-section ul { margin: 0; padding-left: 1.2em; }
.text-section li { margin-bottom: .5em; }

/* Services closing statement: 16 rows, teal over green, photo right */
.cta-services { background: var(--navy); grid-template-rows: repeat(16, minmax(var(--row), auto)); }
.cta-services .sh-teal  { grid-area: 1/14/9/27;  background: var(--teal);  z-index: 2; }
.cta-services .sh-green { grid-area: 9/14/17/27; background: var(--green); z-index: 3; }
.cta-services .cta-img  { grid-area: 3/14/15/27; z-index: 5; }
.cta-services .cta-text { grid-area: 6/2/13/13;  z-index: 0; display: flex; align-items: center; }
.cta-services h3 { color: var(--white); margin: 0; }

@media (max-width: 767px) {
  .banner { grid-template-rows: repeat(19, minmax(24px, auto)); }
  .banner .b-title { grid-area: 2/2/6/7;   }
  .banner .b-photo { grid-area: 7/2/18/10; }
  .banner .b-teal  { grid-area: 1/9/20/11; }
  .banner .b-blue  { grid-area: 17/3/20/11; }
  .banner .b-green { grid-area: 17/9/20/11; }
  .banner h1 { font-size: 9vw; white-space: normal; }
  .photo-band { min-height: 200px; }
  .text-section .wrap > div { max-width: none; }
  .cta-services { grid-template-rows: repeat(18, minmax(24px, auto)); }
  .cta-services .cta-img  { grid-area: 2/2/10/10; }
  .cta-services .sh-teal  { grid-area: 1/1/7/11;  }
  .cta-services .sh-green { grid-area: 7/1/12/11; }
  .cta-services .cta-text { grid-area: 13/2/18/10; }
}

@media (max-width: 767px) {
  .site-footer.fe { grid-template-rows: repeat(6, minmax(24px, auto)); padding: 40px 0; }
  .foot-logo { grid-area: 1/2/3/6;  }
  .foot-addr { grid-area: 3/2/6/11; }
  .foot-nav  { grid-area: 6/2/7/11; text-align: left; }
  .foot-nav a { margin: 0 14px 0 0; }
}