/* ============================================================================
   A.P Forma Build — responsive layer
   ----------------------------------------------------------------------------
   The pages were exported from Claude Design with every rule written as an
   inline style attribute, so there is nothing to hook a normal class-based
   stylesheet onto. This file targets the inline styles themselves with
   attribute-substring selectors, which is why almost everything below needs
   !important — an inline style always outranks a stylesheet rule otherwise.

   Two things to know before editing a page:

   1. If you change one of the values quoted in a selector below
      (e.g. padding:110px 40px), update the matching selector here too.
   2. Never set a layout property with el.style.something = ... in the page
      script. Doing so makes the browser rewrite the whole style attribute in
      its normalised form ("padding: 110px 40px" — note the space), and every
      selector here stops matching that element. Toggle a class instead; that
      is why the reveal-on-scroll animation below lives in CSS.

   Breakpoints
     <= 1100px   nav collapses to the hamburger drawer (see js/apf-mobile-nav.js)
     <=  900px   two-column content blocks stack
     <=  600px   card grids go single file, type and spacing tighten
   ========================================================================== */

/* Never let a stray fixed width push the page sideways. overflow-x:clip is used
   instead of hidden so the sticky nav keeps working. */
html { overflow-x: clip; }

/* Reveal-on-scroll. The page script adds .apf-reveal to everything marked
   data-reveal, then .apf-reveal-in as each block enters the viewport. */
.apf-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22,.8,.3,1),
              transform .7s cubic-bezier(.22,.8,.3,1);
}
.apf-reveal-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .apf-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   MOBILE NAV — drawer
   The .apf-has-mobnav class is added to <html> by js/apf-mobile-nav.js. Without
   it none of this applies, so if the script fails to load the original desktop
   nav is still there and still usable.
   ========================================================================== */

.apf-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: -6px -8px -6px 0;
  padding: 0;
  background: none;
  border: 0;
  color: #F4F1EA;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.apf-burger span {
  display: block;
  position: relative;
  width: 24px;
  height: 2px;
  background: #F4F1EA;
  transition: background .18s ease;
}
.apf-burger span::before,
.apf-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: #F4F1EA;
  transition: transform .22s cubic-bezier(.22,.8,.3,1);
}
.apf-burger span::before { top: -7px; }
.apf-burger span::after  { top:  7px; }

.apf-burger[aria-expanded="true"] span { background: transparent; }
.apf-burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.apf-burger[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

.apf-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(11,11,9,0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, visibility .24s ease;
}
.apf-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  width: min(340px, 86vw);
  display: flex;
  flex-direction: column;
  background: #16150F;
  border-left: 1px solid rgba(255,216,0,0.28);
  transform: translateX(102%);
  transition: transform .28s cubic-bezier(.22,.8,.3,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.apf-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(244,241,234,0.12);
}
.apf-drawer-head span {
  font: 800 13px/1 Archivo, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #F4F1EA;
}
.apf-drawer-close {
  width: 40px;
  height: 40px;
  margin: -8px -10px -8px 0;
  padding: 0;
  background: none;
  border: 0;
  color: #FFD800;
  font: 400 30px/1 Archivo, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.apf-drawer nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0 20px;
}
.apf-drawer nav a {
  padding: 17px 22px;
  border-bottom: 1px solid rgba(244,241,234,0.08);
  font: 600 14px/1.2 Archivo, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #F4F1EA;
}
.apf-drawer nav a[data-apf-sub] {
  padding-left: 38px;
  font-weight: 500;
  color: #CFCABC;
}
.apf-drawer nav a[data-apf-current] { color: #FFD800; }
.apf-drawer nav a:active { background: rgba(255,216,0,0.12); }
.apf-drawer-label {
  padding: 20px 22px 10px;
  font: 500 10px/1 'JetBrains Mono', monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8B8678;
}
.apf-drawer-cta {
  margin: 22px 22px 0;
  padding: 17px 20px !important;
  background: #FFD800;
  border: 0 !important;
  color: #0B0B09 !important;
  font-weight: 700 !important;
  text-align: center;
}
.apf-drawer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding: 26px 22px;
  border-top: 1px solid rgba(244,241,234,0.12);
  font-size: 14px;
}
.apf-drawer-contact a { color: #CFCABC; }

html.apf-nav-open { overflow: hidden; }
html.apf-nav-open body { overflow: hidden; }
html.apf-nav-open .apf-scrim { opacity: 1; visibility: visible; }
html.apf-nav-open .apf-drawer { transform: none; }

@media (max-width: 1100px) {
  .apf-has-mobnav .apf-navlinks { display: none !important; }
  .apf-has-mobnav .apf-burger   { display: inline-flex; }
}

/* The day/night hero is dragged horizontally. pan-y hands vertical swipes back
   to the page so the hero does not trap the scroll on a phone. */
[style*="cursor:ew-resize"] { touch-action: pan-y; }

/* ============================================================================
   <= 1100px — gutters and the widest grids
   ========================================================================== */
@media (max-width: 1100px) {

  /* Every page gutter in the export is written as "<vertical> 40px". Only the
     horizontal half is overridden so the vertical rhythm is left intact. */
  [style*=" 40px"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  [style*="gap:80px"] { gap: 48px !important; }
  [style*="gap:70px"] { gap: 44px !important; }
  [style*="gap:50px"] { gap: 36px !important; }
}

/* ============================================================================
   <= 900px — two-column content blocks stack
   ========================================================================== */
@media (max-width: 900px) {

  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns:1fr 1.3fr"],
  [style*="grid-template-columns:0.85fr 1fr"],
  [style*="grid-template-columns:0.5fr 1fr"],
  [style*="grid-template-columns:130px 1fr 1.2fr"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Stacked blocks were sized for a half-width column. */
  [style*="; height:600px"],
  [style*="; height:560px"],
  [style*="; height:540px"],
  [style*="; height:520px"] {
    height: clamp(300px, 62vw, 460px) !important;
  }

  /* Section headers: big h2 on one line, the small mono caption under it. */
  [style*="align-items:baseline"][style*="justify-content:space-between"],
  [style*="align-items:flex-end"][style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
  }

  [style*="gap:80px"] { gap: 40px !important; }
  [style*="gap:70px"] { gap: 36px !important; }
  [style*="gap:50px"] { gap: 32px !important; }
  [style*="gap:40px"] { gap: 24px !important; }

  /* Heroes are sized in vh with a desktop-scale floor; drop the floor. */
  [style*="min-height:640px"] { min-height: 460px !important; height: 76vh !important; }
  [style*="min-height:520px"],
  [style*="min-height:500px"] { min-height: 420px !important; height: 66vh !important; }
  [style*="min-height:460px"],
  [style*="min-height:420px"] { min-height: 380px !important; height: 60vh !important; }

  /* Trim the desktop vertical rhythm. Each selector matches one of the padding
     shorthands used in the export; the trailing ";" keeps "110px 40px" from
     also matching "110px 40px 90px". */
  [style*="padding:120px 40px"]      { padding-top: 76px !important; padding-bottom: 76px !important; }
  [style*="padding:110px 40px;"]     { padding-top: 70px !important; padding-bottom: 70px !important; }
  [style*="padding:110px 40px 90px"] { padding-top: 70px !important; padding-bottom: 60px !important; }
  [style*="padding:100px 40px 60px"] { padding-top: 64px !important; padding-bottom: 40px !important; }
  [style*="padding:100px 40px 110px"]{ padding-top: 64px !important; padding-bottom: 70px !important; }
  [style*="padding:90px 40px;"]      { padding-top: 58px !important; padding-bottom: 58px !important; }
  [style*="padding:90px 40px 110px"] { padding-top: 58px !important; padding-bottom: 70px !important; }
  [style*="padding:80px 40px 110px"] { padding-top: 54px !important; padding-bottom: 70px !important; }
  [style*="padding:80px 40px 40px"]  { padding-top: 54px !important; padding-bottom: 28px !important; }
  [style*="padding:56px 40px;"]      { padding-top: 40px !important; padding-bottom: 40px !important; }
  [style*="padding:56px 40px 30px"]  { padding-top: 40px !important; padding-bottom: 22px !important; }
  [style*="padding:60px 40px 0"]     { padding-top: 40px !important; }
  [style*="padding:34px 40px 100px"] { padding-top: 26px !important; padding-bottom: 64px !important; }
  [style*="padding:0 40px 120px"]    { padding-bottom: 76px !important; }
  [style*="padding:0 40px 110px"]    { padding-bottom: 70px !important; }
  [style*="padding:0 40px 100px"]    { padding-bottom: 64px !important; }
}

/* ============================================================================
   <= 600px — phones
   ========================================================================== */
@media (max-width: 600px) {

  [style*=" 40px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Card grids go single file. */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ...except the hairline-gap tile grids that hold nothing but a number and a
     short label (lighting fixtures, softscape services). Those read fine two up.
     :has() is what separates them from the picture-card grids that share the
     same gap:1px styling; browsers without it just get one column. */
  [style*="gap:1px"]:not(:has(img)):not(:has([role="img"])) {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* An odd number of tiles two up leaves a hole, and the hole is visible: the
     hairline grid is drawn by letting the container background show through the
     1px gaps, so an empty cell shows up as a pale block. Let the last tile in an
     odd-length grid run the full width instead. */
  [style*="gap:1px"]:not(:has(img)):not(:has([role="img"])) > :last-child:nth-child(odd) {
    grid-column: span 2;
  }

  /* Card imagery: shorter, so a card is not one full screen of photo. */
  [style*="; height:300px"],
  [style*="; height:290px"],
  [style*="; height:280px"],
  [style*="; height:250px"],
  [style*="; height:240px"] {
    height: 210px !important;
  }

  [style*="min-height:640px"] { min-height: 420px !important; height: 78vh !important; }
  [style*="min-height:520px"],
  [style*="min-height:500px"] { min-height: 380px !important; height: 70vh !important; }
  [style*="min-height:460px"],
  [style*="min-height:420px"] { min-height: 340px !important; height: 62vh !important; }

  /* Rows built as two ends of a flex line need to wrap rather than squeeze:
     the footer legal bar, the contact detail rows, the hero caption. The mono
     type in these rows is set with a font shorthand carrying line-height 1,
     which collides once a line wraps. */
  [style*="padding:22px 40px"] { flex-wrap: wrap !important; line-height: 1.6 !important; }
  [style*="white-space:nowrap"] { white-space: normal !important; }

  /* The hero's "drag day/night" caption is right-aligned against the far edge of
     a two-item row. Once that row wraps it sits under the copy, where a ragged
     right edge just reads as broken. */
  [style*="text-align:right"][style*="white-space:nowrap"] { text-align: left !important; }

  /* The contact form panel. */
  [style*="padding:44px;"] { padding: 24px !important; }

  /* iOS zooms the page in on focus for any field under 16px. */
  input, textarea, select { font-size: 16px !important; }

  /* Tap targets. */
  [data-interest], [data-filter] { padding: 13px 16px !important; }

  [style*="gap:80px"] { gap: 34px !important; }
  [style*="gap:70px"] { gap: 32px !important; }
  [style*="gap:50px"] { gap: 30px !important; }
  [style*="gap:30px"] { gap: 24px !important; }
  [style*="gap:26px"] { gap: 20px !important; }

  /* Body copy set at 17–19px for a 520px desktop column is heavy on a phone. */
  [style*="font-size:19px"] { font-size: 17px !important; }
  [style*="font-size:18px"] { font-size: 16.5px !important; }
  [style*="font-size:17px"] { font-size: 16px !important; }

  /* The hexagon clip reads as a mistake at phone width — it eats the corners of
     an already narrow image. Square the feature images off. */
  [style*="clip-path:polygon(50% 0%"] { clip-path: none !important; }

  [style*="padding:120px 40px"]      { padding-top: 60px !important; padding-bottom: 60px !important; }
  [style*="padding:110px 40px;"]     { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding:110px 40px 90px"] { padding-top: 56px !important; padding-bottom: 48px !important; }
  [style*="padding:100px 40px 60px"] { padding-top: 52px !important; padding-bottom: 32px !important; }
  [style*="padding:100px 40px 110px"]{ padding-top: 52px !important; padding-bottom: 56px !important; }
  [style*="padding:90px 40px;"]      { padding-top: 48px !important; padding-bottom: 48px !important; }
  [style*="padding:90px 40px 110px"] { padding-top: 48px !important; padding-bottom: 56px !important; }
  [style*="padding:80px 40px 110px"] { padding-top: 44px !important; padding-bottom: 56px !important; }
  [style*="padding:80px 40px 40px"]  { padding-top: 44px !important; padding-bottom: 24px !important; }
  [style*="padding:56px 40px;"]      { padding-top: 34px !important; padding-bottom: 34px !important; }
  [style*="padding:56px 40px 30px"]  { padding-top: 34px !important; padding-bottom: 20px !important; }
  [style*="padding:34px 40px 100px"] { padding-top: 22px !important; padding-bottom: 52px !important; }
  [style*="padding:0 40px 120px"]    { padding-bottom: 60px !important; }
  [style*="padding:0 40px 110px"]    { padding-bottom: 56px !important; }
  [style*="padding:0 40px 100px"]    { padding-bottom: 52px !important; }

  /* Hero copy sits above the fold-bottom gradient; pull it in from the edge. */
  [style*="bottom:44px"], [style*="bottom:48px"] { bottom: 28px !important; }
}

/* ============================================================================
   <= 400px — small phones
   ========================================================================== */
@media (max-width: 400px) {
  [style*=" 40px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Contact rows: label above value rather than a 2px-wide gap between them. */
  [style*="padding:20px 0"][style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
}

/* A drag hint is meaningless without a pointer, but the hero is still swipeable,
   so the wording is swapped rather than hidden. Handled in JS. */