/* FOV — GENERATED by port.py. The block below is the design's own
 * <helmet> stylesheet, verbatim. Additions follow it. Do not hand-edit.
 */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:#000;font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
a{color:#000;text-decoration:none;transition:color .3s ease,opacity .3s ease}
a:hover{color:#8a8a8a}
::selection{background:#000;color:#fff}
input,textarea,select,button{font:inherit;color:inherit;border-radius:0}
input:focus,textarea:focus,select:focus{outline:none;border-color:#000 !important}
select{appearance:none;-webkit-appearance:none}
textarea{resize:none}
input,select,textarea{color:inherit}
option{color:#000;background:#fff}
::placeholder{color:#6e6e6e}
@keyframes fovdrift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-2%,-1.5%,0)}}
@keyframes fovbreathe{from{transform:scale(1.015) translate3d(0,0,0)}to{transform:scale(1.075) translate3d(-1.4%,-.9%,0)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:900px){
[data-navlink]{display:none !important}
[data-header]>div{padding:13px clamp(18px,5vw,80px) !important}
[data-header] [data-btn]{padding:15px 18px 14px !important}
}
@media (max-width:430px){
[data-brandsub]{display:none !important}
}
@media (max-width:820px){
[data-stickycol]{display:none !important}
[data-stepindex]{display:flex !important}
[data-approach]{padding-top:clamp(190px,32vh,320px) !important;padding-bottom:clamp(70px,11vh,150px) !important}
[data-approach] [data-bandfade="top"]{height:clamp(180px,30vh,320px) !important}
[data-steps]{padding-top:0 !important;padding-bottom:0 !important;gap:clamp(46px,9vh,90px) !important}
[data-step]{min-height:0 !important}
[data-briefcol]{position:static !important}
}
@media (max-width:640px){
[data-bodypinwrap]{height:auto !important}
#problem{min-height:0 !important}
[data-gap]{flex:none !important;min-height:clamp(52px,8vh,96px) !important}
[data-bodypin]{position:static !important}
#top{padding-top:88px !important;padding-bottom:118px !important}
#top p{mix-blend-mode:normal !important}
[data-bodypin]{justify-content:center !important}
[data-bodyfocus]{font-size:16.5px !important;text-align:center !important}
[data-cycletext]{font-size:27px !important;text-align:center !important}
[data-svcink]{top:auto !important;bottom:0 !important;left:-30% !important;width:152% !important}
[data-rowinner]{gap:12px !important;padding:20px 14px !important}
[data-service] h3{font-size:26px !important}
[data-caps] p{font-size:16px !important}
[data-chip]{display:inline-flex !important;align-items:center !important;padding:0 16px !important;min-height:44px !important}
[data-form] [data-btn]{width:100% !important;text-align:center !important}
[data-footcol]{gap:0 !important}
[data-footcol] a{min-height:42px;display:flex;align-items:center}
}

/* ============================================================
   Added by port.py — not in the design's own <style> block
   ============================================================ */

/* intl-tel-input, themed for a black form.
   The library ships a light theme and exposes it entirely through custom properties,
   so this is variables plus a few rules for the input itself — not a rewrite of its
   stylesheet, which would break on the next version bump. #brief is #000. */
.iti {
  --iti-country-selector-bg: #0a0a0a;
  --iti-border-color: #262626;
  --iti-border-width: 1px;
  --iti-hover-color: rgba(255, 255, 255, .07);
  --iti-icon-color: #8a8a8a;
  --iti-spacer-horizontal: 12px;
  width: 100%;
}

/* The design's inputs are transparent with no border; the wrapper must not
   reintroduce one, and the tel input has to keep inheriting the form's type. */
.iti__tel-input,
.iti input[type="tel"] {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -.01em;
  color: #fff;
}

/* Square corners: everything else on this site sets border-radius:0. */
.iti__country-selector,
.iti__search-input { border-radius: 0; }

.iti__selected-dial-code {
  font-size: 18px;
  font-weight: 300;
  color: #fff;
}

.iti__search-input { color: #fff; font-size: 15px; padding-top: 12px; padding-bottom: 12px; }
.iti__search-input::placeholder { color: #6e6e6e; }
.iti__country { color: #fff; }
.iti__dial-code { color: #8a8a8a; }
.iti__country-list { scrollbar-width: thin; }

/* The country button is a real button and needs a visible focus ring, since the
   design's inputs rely on a border colour change this element does not have. */
.iti__selected-country:focus-visible,
.iti__selected-country-primary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* The design has no skip link; the header is fixed and the hero is tall. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 130;
  background: #000;
  color: #fff;
  padding: 14px 22px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; color: #fff; }

/* Service rows are exposed as buttons, so they need a visible focus ring.
   The design gives them none because it never expected them to be focusable. */
[data-service]:focus-visible {
  outline: 2px solid #000;
  outline-offset: -3px;
}

/* Reduced motion: the JS already branches on it for everything it drives, but
   the two drift keyframes are set from markup/JS as inline animation, so they
   need stopping here too. The composed image must remain, not disappear. */
@media (prefers-reduced-motion: reduce) {
  [data-inkbreathe],
  [data-herowordmark],
  [data-wordmark] {
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   Phones — only what the design's own breakpoints do NOT cover.

   The design now ships four of them (900 / 820 / 640 / 430) and they are good:
   it hides the nav links, unpins the body and approach blocks, drops the hero
   subtitle's mix-blend-mode, gives the chips a 44px min-height, resizes the
   service type, and repositions the ink wash to the bottom on phones. All of
   that used to live here and has been deleted rather than duplicated —
   two rules setting the same property is how a re-port silently drifts.

   What is left is the three things the design still does not do:
     1. Form CONTROLS under the 44px touch floor. The design fixed the chips and
        the footer links; the inputs and selects are still ~20px tall, and a
        sub-16px font makes iOS zoom the page on focus.
     2. Mono labels at 9.5-10.5px. The design hides the brandmark subtitle below
        430px but the seven field labels, the chip heading, the reply note and
        the footer's three are still 10px.

   The services ink layer is deliberately NOT touched here. Its dark mass is the
   point: the service names are #fff in mix-blend-mode:difference, so a near-black
   backdrop renders them white and a near-white backdrop renders them black. This
   image is near-binary ink on white, so both ends are well served and only a
   narrow transition sits in the unreadable middle. An earlier pass here narrowed
   the box and dropped its opacity, which moved the whole layer into that middle,
   lost the drama, and — by pulling the box's right edge into the dark mass —
   exposed the mask's edge cut, which is invisible at the design's own width
   because there the edge falls on near-white pixels.

   Inline declarations outrank any plain selector, so anything competing with
   one needs !important. Documented repo rule, not decoration.
   ============================================================ */

@media (max-width: 720px) {
  /* 1. form controls */
  /* :not([aria-hidden]) keeps the honeypot at 1px — inflating a deliberately
     hidden input to 44px does nothing for a human and trips the tap-target audit. */
  [data-form] input:not([aria-hidden]),
  [data-form] select,
  [data-form] textarea {
    min-height: 44px !important;
    font-size: 17px !important;   /* under 16px and iOS zooms the page on focus */
  }
  [data-form] textarea { min-height: 96px !important; }
  [data-form] button[type="submit"] { min-height: 52px !important; }

  /* The design sets [data-footcol] a to 42px, which is just under the floor. */
  [data-footcol] a { min-height: 44px !important; }

  /* Links and the brand mark, which carry no padding of their own. */
  a[href^="mailto:"] { min-height: 44px; display: inline-flex; align-items: center; }
  [data-header] > div > a { min-height: 44px; align-items: center !important; }
  [data-header] [data-btn] { min-height: 44px; display: inline-flex !important; align-items: center; }
  .skip-link { min-height: 44px; display: inline-flex; align-items: center; }

  /* 2. readable label type.
     The design's small mono labels are set inline, so the inline declaration IS
     the selector — precise, and it needs no list of containers to drift out of
     date. An enumerated version of this missed four of the eleven.
     BOTH spacings are required: any JS write through el.style.* reserializes the
     whole attribute and Chrome emits "font-size: 10px" WITH a space, silently
     un-matching the unspaced form. That is also why [data-btnlabel] is named
     explicitly — the header inversion rewrites its colour. A fresh load looked
     correct and only failed after that had run. */
  [style*="font-size:9.5px"],
  [style*="font-size: 9.5px"] { font-size: 11px !important; letter-spacing: .14em !important; }
  [style*="font-size:10px"],
  [style*="font-size: 10px"],
  [style*="font-size:10.5px"],
  [style*="font-size: 10.5px"],
  [data-btnlabel] { font-size: 11.5px !important; letter-spacing: .12em !important; }
}

/* Tablets are touch too, and the design's phone rules stop at 640px. */
@media (pointer: coarse) {
  [data-form] input:not([aria-hidden]),
  [data-form] select,
  [data-form] textarea { min-height: 44px !important; font-size: 17px !important; }
  [data-form] textarea { min-height: 96px !important; }
}