:root{
  --ink:#16150F;
  --ink-70:rgba(22,21,15,.70);
  --ink-muted:rgba(22,21,15,.62);
  --rule:rgba(22,21,15,.16);
  --paper:#FFFFFF;
  --paper-2:#F4F3F0;
  --accent:#A8460F;
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:var(--paper);padding:10px 16px}

/* On a notched iPhone held sideways, the notch eats roughly 44px of the left or
   right edge. max() keeps the normal 28px everywhere else and only widens the
   padding on the affected side. Browsers without env() just get the 28px. */
.wrap{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-left:max(28px, env(safe-area-inset-left));
  padding-right:max(28px, env(safe-area-inset-right));
}

.mono{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-muted);
}

h1,h2,h3{font-family:Oswald,Impact,sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.005em;line-height:.98;margin:0}
h1{font-size:clamp(2.7rem,6.6vw,5rem);font-weight:700;letter-spacing:-.005em}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:1.32rem}
p{margin:0 0 1rem}
.lede{font-size:1.14rem;color:var(--ink-70);max-width:46ch}

/* ---------- utility bar (phone) ---------- */
.utility{background:var(--ink);color:var(--paper)}
.utility-inner{display:flex;justify-content:space-between;align-items:center;min-height:40px}
.utility .mono{color:rgba(242,239,231,.6)}
/* the number is the most valuable tap target on the site, so it gets the full
   height of the bar rather than the 17px a bare inline link would be */
.utility .phone{
  color:var(--paper);text-decoration:none;font-size:.8rem;
  display:inline-block;padding-block:11px;
}
.utility .phone:hover{color:var(--accent-on-dark,#E08A3C)}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper)}
.masthead-inner{display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:78px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{mix-blend-mode:multiply}
.brand span{font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:1.02rem}
.masthead nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.masthead nav a{
  text-decoration:none;font-size:.83rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;padding:10px 14px;color:var(--ink-70);
}
.masthead nav a:hover{color:var(--ink)}
.masthead nav .cta{background:var(--ink);color:var(--paper)}
.masthead nav .cta:hover{background:var(--accent);color:#fff}

/* ---------- hero ---------- */
/* grid + fade are stacked background layers, not pseudo-elements, so nothing
   here creates a stacking context and mix-blend-mode on the logo still works */
.hero{
  padding:clamp(46px,7vw,92px) 0 clamp(38px,5vw,70px);
  background-image:
    linear-gradient(to bottom,rgba(242,239,231,.55),var(--paper) 84%),
    repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(to bottom,var(--rule) 0 1px,transparent 1px 88px);
  background-position:center top;
}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.tag{margin-bottom:1.4rem}
.hero h1{margin-bottom:1.5rem}
.hero-mark img{mix-blend-mode:multiply;width:min(480px,100%);margin-inline:auto}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.1rem}
.btn{
  display:inline-block;text-decoration:none;background:var(--ink);color:var(--paper);
  font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;font-size:.94rem;padding:15px 30px;border:2px solid var(--ink);
  transition:background .14s,color .14s,border-color .14s;
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-big{padding:19px 42px;font-size:1.06rem}
.btn-light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-light:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- ticker ---------- */
.ticker{background:var(--ink);padding:13px 0}
.ticker .mono{color:rgba(242,239,231,.72);margin:0;text-align:center;font-size:.7rem}

/* ---------- sheets ---------- */
.sheet{padding:clamp(52px,7vw,94px) 0}
.sheet.alt{background:var(--paper-2)}
.sheet-head{display:flex;align-items:baseline;gap:18px;
  padding-bottom:18px;border-bottom:2px solid var(--ink);margin-bottom:8px}
.idx{color:var(--accent);font-size:.78rem}
.idx.light{color:rgba(242,239,231,.55)}

.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:88px 1fr;gap:22px;
  padding:30px 0;border-bottom:1px solid var(--rule);align-items:start}
.rownum{font-family:Oswald,sans-serif;font-size:2.4rem;font-weight:700;
  color:var(--accent);line-height:1}
.rowbody h3{margin-bottom:.45rem}
.rowbody p{margin:0;color:var(--ink-70);max-width:56ch}

.steps{list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0}
/* no border-top here: the .sheet-head rule already draws the line above the row,
   and doubling them reads as a mistake. Columns are divided by border-left. */
.steps li{padding:26px 24px 26px 0}
.steps li + li{padding-left:24px;border-left:1px solid var(--rule)}
.steps .mono{display:block;margin-bottom:14px;color:var(--accent)}
.steps h3{font-size:1.14rem;margin-bottom:.4rem}
.steps p{margin:0;color:var(--ink-70);font-size:.96rem}

.places{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.places li{
  font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;font-size:1.02rem;
  border:1px solid var(--rule);padding:11px 20px;
}
.note{margin-top:22px;color:var(--ink-muted);font-size:.95rem}

/* ---------- credentials (optional) ---------- */
.creds{background:var(--ink);color:var(--paper);padding:44px 0}
.creds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.creds-grid div{display:flex;flex-direction:column;gap:6px;
  border-left:3px solid var(--accent);padding-left:18px}
.figure{font-family:Oswald,sans-serif;font-weight:700;font-size:2rem;
  text-transform:uppercase;line-height:1}
.creds .mono{color:rgba(242,239,231,.6)}

/* ---------- rentals ---------- */
.rentals{background:var(--ink);color:var(--paper);padding:clamp(52px,7vw,90px) 0}
.rentals-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.rentals h2{margin-top:12px}
.rentals p{color:rgba(242,239,231,.74);margin-bottom:1.8rem;max-width:48ch}

/* ---------- estimate ---------- */
.estimate{padding:clamp(56px,8vw,104px) 0;border-top:2px solid var(--ink)}
.estimate-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.estimate h2{margin:12px 0 1rem}
.estimate .lede{margin-bottom:1.2rem}
.estimate .alt{color:var(--ink-muted);font-size:.96rem;margin:0}
.estimate .alt a{color:var(--accent);text-underline-offset:3px}

.field{margin-bottom:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:block;margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:0;
  padding:13px 14px;
}
.field textarea{resize:vertical;min-height:120px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-muted)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:3px solid var(--accent);outline-offset:1px;border-color:var(--ink)}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--accent)}
.estimate-form .btn{margin-top:10px;cursor:pointer}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-list{list-style:none;padding:0;margin:2rem 0 0;display:flex;gap:26px;flex-wrap:wrap}
.contact-list a{color:var(--ink);font-size:.82rem;display:inline-block;padding-block:7px}

/* ---------- footer ---------- */
.foot{background:var(--paper-2);border-top:1px solid var(--rule);padding:34px 0}
.foot-inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot img{mix-blend-mode:multiply}
.footname{font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;margin:0;font-size:1rem}
.foot p{margin:0}
.foot-inner .copy{margin-left:auto}

/* ---------- responsive ---------- */
@media (max-width:920px){
  /* nav no longer fits beside the brand. Give it its own row and pull it back
     by the link padding so its text aligns with the brand text above it. */
  .masthead-inner{padding-block:14px;gap:6px}
  .masthead nav{width:100%;margin-left:-14px}
  .ticker .mono{text-wrap:balance}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-mark{order:-1}
  .hero-mark img{width:min(300px,66%)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps li:nth-child(odd){padding-left:0;border-left:none}
  .steps li:nth-child(even){padding-left:24px;border-left:1px solid var(--rule)}
  .rentals-grid{grid-template-columns:1fr;gap:20px}
  .estimate-grid{grid-template-columns:1fr;gap:34px}
  .creds-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .masthead-inner{padding-block:16px}
  .masthead nav{width:100%;margin-left:-14px}
  .rows li{grid-template-columns:56px 1fr;gap:14px;padding:24px 0}
  .rownum{font-size:1.8rem}
  .steps{grid-template-columns:1fr}
  .steps li,.steps li + li,
  .steps li:nth-child(odd),.steps li:nth-child(even){
    padding:22px 0;border-left:none;border-bottom:1px solid var(--rule)}
  .steps li:last-child{border-bottom:none}
  .field-row{grid-template-columns:1fr;gap:0}
  .foot-inner .copy{margin-left:0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---------- thanks page ---------- */
.thanks{padding-block:clamp(28px,6vw,70px)}
.thanks h1,.thanks .lede{max-width:620px}
.thanks h1{margin:14px 0 1rem}
.thanks .lede{margin-bottom:2rem}

.opt{font-size:.9em;letter-spacing:.08em;color:var(--ink-muted);opacity:.75}
.prose > *{max-width:70ch}
.prose .lede{max-width:70ch}
.prose h1{margin:14px 0 1rem}
.prose h2{font-size:1.35rem;margin:2.2rem 0 .6rem}
.prose .lede{margin-bottom:2rem}
.prose p{color:var(--ink-70)}
.prose .note{font-size:.9rem;margin-top:2.4rem}
.prose .btn{margin-top:1rem}
.foot-inner .copy a{color:var(--ink-muted)}

/* WCAG 2.2 target size: these two were 14px and 21px tall */
.foot-inner .copy a{display:inline-block;padding:6px 6px;margin:-6px -6px}
.estimate .alt a{display:inline-block;padding-block:5px}

/* build credit. Brand name as anchor text, never a keyword phrase like
   "Saint John web design", which is what turns a credit into a link scheme. */
.credit-row{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
.credit{margin:0;font-size:.66rem;text-align:center}
.credit a{color:var(--ink-muted);display:inline-block;padding:6px 8px;margin:-6px -2px}
.credit a:hover{color:var(--accent)}
.prose p a:not(.btn){display:inline-block;padding-block:5px;color:var(--accent)}

/* ---------- WebKit / iOS Safari hardening ----------
   Cannot test WebKit from this machine, so these guard against its documented
   defaults rather than relying on them being harmless.

   1. iOS puts an inset shadow and rounded corners on text inputs and buttons.
      border-radius:0 alone does not remove the shadow; appearance:none does.
   2. Killing appearance on a select also kills its dropdown arrow, so the
      arrow is redrawn as an inline SVG. Without this there is no affordance.
   3. iOS inflates text in landscape unless text-size-adjust is pinned. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

.field input,.field textarea,.estimate-form .btn,button.btn{
  -webkit-appearance:none;appearance:none;border-radius:0;
}
.field select{
  -webkit-appearance:none;appearance:none;border-radius:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2316150F' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px;
}