/* Golden Gate Connect — "Field Notice" poster design system
   Screen-print / WPA aesthetic. Inks: International Orange, fog-navy, teal. Paper + halftone + grain. */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --orange:#DE4B26; --orange2:#EA6A3A; --navy:#13283F; --navy2:#0d1c2e; --teal:#2E6F6A; --teal-d:#1d5650;
  --paper:#EFE3C7; --paper2:#E6D4AE; --cream:#F7F0DC; --sun:#E4612E; --ink:#1b2a36; --muted:#6a6253;
  --line:#cbb990; --line-d:rgba(19,40,63,.16);
  --display:'Anton',Impact,sans-serif; --body:'Archivo',system-ui,sans-serif; --mono:'Space Mono',monospace;
  --ease:cubic-bezier(.2,.7,.2,1); --maxw:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--paper);color:var(--navy);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* paper grain */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.10;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* ---------- type ---------- */
.eyebrow{font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--orange);display:inline-block}
h2.head{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.5px;line-height:.92;
  font-size:clamp(2.2rem,5.4vw,4.6rem);color:var(--navy);margin:14px 0 0}
h2.head .o{color:var(--orange)}
.ghost{position:relative;display:inline-block}
.ghost::before{content:attr(data-t);position:absolute;left:2px;top:2px;color:var(--navy);opacity:.13;z-index:-1}
.dek{font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--ink);max-width:54ch;margin-top:18px;font-weight:500}
.mono{font-family:var(--mono);letter-spacing:.04em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:700;font-size:.86rem;letter-spacing:1.5px;
  text-transform:uppercase;padding:15px 26px;border-radius:2px;border:2px solid var(--navy);cursor:pointer;transition:.22s var(--ease)}
.btn-fill{background:var(--navy);color:var(--cream)}
.btn-fill:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-3px)}
.btn-ink{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-ink:hover{background:var(--navy);border-color:var(--navy);transform:translateY(-3px)}
.btn-ghost{background:transparent;color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:var(--cream);transform:translateY(-3px)}
.btn-ghost.on-ink{color:var(--cream);border-color:rgba(255,255,255,.4)}
.btn-ghost.on-ink:hover{background:var(--cream);color:var(--navy);border-color:var(--cream)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:120;background:rgba(239,227,199,.9);backdrop-filter:blur(8px);border-bottom:2px solid var(--navy)}
.nav .wrap{display:flex;align-items:center;gap:26px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.35rem;letter-spacing:.5px;color:var(--navy)}
.brand .o{color:var(--orange)}
.nav-links{display:flex;gap:22px;margin-left:6px}
.nav-links a{font-family:var(--mono);font-size:.78rem;letter-spacing:1px;text-transform:uppercase;color:var(--navy);opacity:.78;position:relative;transition:.2s}
.nav-links a:hover{opacity:1;color:var(--orange)}
.nav-right{margin-left:auto;display:flex;gap:12px;align-items:center}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.mobile{display:none;flex-direction:column;background:var(--paper);border-bottom:2px solid var(--navy);padding:10px 32px 20px}
.mobile.open{display:flex}
.mobile a{font-family:var(--mono);text-transform:uppercase;font-size:.82rem;letter-spacing:1px;padding:12px 2px;border-bottom:1px solid var(--line)}

/* ---------- section frame ---------- */
.section{position:relative;padding:90px 0}
.section.ink{background:var(--navy);color:var(--cream)}
.section.ink h2.head{color:#fff} .section.ink h2.head .o{color:var(--orange2)}
.section.ink .dek{color:#c9d4e0}
.section.ink .eyebrow{color:var(--orange2)}
.section.paper2{background:var(--paper2)}
.section .halftone-edge{position:absolute;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:multiply;
  background-image:radial-gradient(var(--orange) 1px,transparent 1.3px);background-size:13px 13px;
  -webkit-mask-image:radial-gradient(120% 80% at 100% 0,#000,transparent 60%);mask-image:radial-gradient(120% 80% at 100% 0,#000,transparent 60%)}
.section.ink .halftone-edge{background-image:radial-gradient(var(--orange2) 1px,transparent 1.3px)}
.section-head{max-width:680px;margin-bottom:52px;position:relative;z-index:2}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- field log (how it works) ---------- */
.log{border-top:2px solid var(--line-d)}
.log .row{display:grid;grid-template-columns:120px 1fr auto;gap:28px;align-items:start;padding:30px 0;border-bottom:1px solid var(--line-d)}
.log .num{font-family:var(--display);font-size:clamp(3rem,5vw,4.6rem);line-height:.8;color:var(--orange)}
.log .row h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.5rem;letter-spacing:.5px;color:var(--navy);margin-bottom:8px}
.log .row p{color:var(--ink);max-width:60ch}
.log .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:2px;color:var(--teal-d);text-transform:uppercase;white-space:nowrap;padding-top:8px}
@media(max-width:760px){.log .row{grid-template-columns:64px 1fr;gap:18px}.log .num{font-size:2.6rem}.log .tag{display:none}}

/* ---------- segment poster tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--navy);border-bottom:0}
.tile{position:relative;padding:30px 26px 26px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);background:var(--cream);transition:.25s var(--ease);overflow:hidden;display:flex;flex-direction:column;min-height:280px}
.tile:nth-child(3n){border-right:0}
.tile:hover{background:var(--paper2)}
.tile.feature{background:var(--navy);color:var(--cream);grid-column:span 1}
.tile.feature h3,.tile.feature .price{color:#fff}
.tile.feature .price .n{color:var(--orange2)}
.tile .glyph{width:46px;height:46px;color:var(--orange);margin-bottom:16px}
.tile.feature .glyph{color:var(--orange2)}
.tile h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.55rem;letter-spacing:.5px;color:var(--navy);margin-bottom:8px}
.tile p{color:var(--ink);font-size:.95rem;flex:1}
.tile.feature p{color:#c9d4e0}
.tile .price{margin-top:16px;font-family:var(--mono);font-size:.82rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.tile .price .n{color:var(--orange);font-weight:700}
.tile .go{margin-top:12px;font-family:var(--mono);font-size:.74rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--orange);display:inline-flex;gap:6px;align-items:center}
.tile.feature .go{color:var(--orange2)}
.tile .badge{position:absolute;top:0;right:0;background:var(--orange);color:#fff;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:2px;padding:6px 13px;border-bottom-left-radius:6px}
@media(max-width:880px){.tiles{grid-template-columns:1fr 1fr}.tile:nth-child(3n){border-right:2px solid var(--navy)}.tile:nth-child(2n){border-right:0}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}.tile{border-right:0!important}}

/* ---------- ledger (comparison) ---------- */
.ledger{width:100%;border-collapse:collapse;border:2px solid var(--cream);background:rgba(255,255,255,.03)}
.ledger caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ledger th,.ledger td{padding:16px 22px;text-align:left;border-bottom:1px solid rgba(255,255,255,.12);font-size:.98rem}
.ledger thead th{font-family:var(--mono);font-size:.74rem;letter-spacing:2px;text-transform:uppercase;color:#aebbcd;font-weight:700}
.ledger thead th.us{color:var(--orange2)}
.ledger td.us{background:rgba(222,75,38,.1)}
.ledger .rl{font-family:var(--mono);font-size:.78rem;letter-spacing:1px;text-transform:uppercase;color:#aebbcd}
.ledger .yes{color:#5fd6a0;font-weight:700} .ledger .no{color:#8190a3}
.ledger tbody tr:last-child th,.ledger tbody tr:last-child td{border-bottom:0}

/* ---------- price plates ---------- */
.plates{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.plate{border:2px solid var(--navy);background:var(--cream);padding:30px}
.plate.managed{background:var(--navy);color:var(--cream)}
.plate h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.7rem;letter-spacing:.5px;margin-bottom:4px}
.plate.managed h3{color:#fff}
.plate .ptag{font-family:var(--mono);font-size:.74rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.plate.managed .ptag{color:#a9b6cc}
.pl{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line-d)}
.plate.managed .pl{border-color:rgba(255,255,255,.14)}
.pl .l{font-weight:600} .pl .l small{display:block;font-weight:400;font-size:.78rem;color:var(--muted);text-transform:none;letter-spacing:0}
.plate.managed .pl .l small{color:#9fb0c8}
.pl .p{font-family:var(--display);font-size:1.55rem;font-variant-numeric:tabular-nums}
.plate.managed .pl .p{color:var(--orange2)}
@media(max-width:760px){.plates{grid-template-columns:1fr}}

/* ---------- guarantee ---------- */
.guar{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.guar .stamp-lg{width:150px;height:150px;flex-shrink:0;border:3px solid var(--orange2);border-radius:6px;transform:rotate(-6deg);
  display:grid;place-items:center;text-align:center;font-family:var(--mono);font-weight:700;letter-spacing:2px;color:var(--orange2);
  font-size:.8rem;line-height:1.5;padding:14px;background:rgba(222,75,38,.06)}
.guar .incl{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.guar .incl span{font-family:var(--mono);font-size:.72rem;letter-spacing:1px;text-transform:uppercase;border:1px solid rgba(255,255,255,.22);padding:7px 12px;border-radius:2px;color:#cdd8e6}
@media(max-width:640px){.guar{grid-template-columns:1fr;text-align:center}.guar .stamp-lg{margin:0 auto}}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:0 auto;border-top:2px solid var(--line-d)}
.faq details{border-bottom:1px solid var(--line-d);padding:20px 4px}
.faq summary{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.2rem;letter-spacing:.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-family:var(--body)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--ink);margin-top:12px;max-width:70ch}

/* ---------- cta band ---------- */
.cta-band{text-align:center;border:2px solid var(--orange);background:rgba(222,75,38,.06);padding:54px 32px}
.cta-band h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(2rem,4vw,3.4rem);color:var(--navy);line-height:.95}
.cta-band p{font-family:var(--mono);font-size:.86rem;letter-spacing:1px;color:var(--ink);margin:14px auto 26px;max-width:48ch;text-transform:uppercase}

/* ---------- footer ---------- */
footer{background:var(--navy2);color:#c0ccdb;padding:60px 0 34px}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
footer h4{font-family:var(--mono);font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:#7d8aa3;margin-bottom:14px}
footer a,footer p{font-size:.92rem;margin-bottom:8px;display:block;transition:.2s}
footer a:hover{color:var(--orange2)}
.foot-tag{font-family:var(--display);font-size:1.2rem;color:#fff;letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:22px;font-family:var(--mono);font-size:.72rem;letter-spacing:1px;color:#6f7c93}
@media(max-width:760px){.foot{grid-template-columns:1fr 1fr}}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.lines .ln{display:block;overflow:hidden}
.lines .ln i{display:inline-block;transform:translateY(110%);font-style:normal}
.lines.in .ln i{transform:none;transition:transform .7s var(--ease)}
.lines.in .ln:nth-child(2) i{transition-delay:.08s}
.lines.in .ln:nth-child(3) i{transition-delay:.16s}
@media(prefers-reduced-motion:reduce){.reveal,.lines .ln i{opacity:1!important;transform:none!important;transition:none!important}}

/* ---------- icons ---------- */
.ic{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- mobile nav ---------- */
@media(max-width:900px){.nav-links{display:none}.nav-toggle{display:block}.nav-right{margin-left:auto}.nav-right .btn{display:none}}

/* booking control focus rings (keyboard a11y) */
.opt:focus-visible,.addon:focus-visible,.toggle .t:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* dark-section FAQ legibility (so navy-on-navy never happens) */
.section.ink .faq{border-top-color:rgba(255,255,255,.22)}
.section.ink .faq details{border-bottom-color:rgba(255,255,255,.14)}
.section.ink .faq summary{color:#fff}
.section.ink .faq p{color:#c9d4e0}

/* no-JS fallback: never hide content if scripting is unavailable */
@media (scripting: none){.reveal{opacity:1;transform:none}.lines .ln i{transform:none}}