:root {
  --page-pad: clamp(20px, 7vw, 108px);
  --navy: #0b1f33;
  --navy-soft: #132d47;
  --blue: #2d73a5;
  --sky: #e8f1f7;
  --cream: #f5f2eb;
  --paper: #fffefa;
  --orange: #f4a340;
  --ink: #102236;
  --muted: #637080;
  --line: #dfe5e8;
  --radius: 22px;
  --shadow: 0 22px 60px rgba(5, 24, 41, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.site-header { height: 82px; padding: 0 clamp(20px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; position: absolute; z-index: 5; width: 100%; color: #fff; }
.brand { display: inline-flex; align-items: center; line-height: 1; }
.brand-logo { display:block; width:230px; height:auto; }
nav { display: flex; gap: 30px; align-items: center; font-size: 13px; font-weight: 700; }
nav a { opacity: .82; transition: opacity .2s ease; }
nav a:hover { opacity: 1; }
.nav-cta { border: 1px solid rgba(255,255,255,.4); padding: 11px 16px; border-radius: 999px; opacity: 1; }

.hero { min-height: 760px; padding: 140px var(--page-pad) 88px; color: #fff; background: radial-gradient(circle at 78% 25%, rgba(62,126,170,.38), transparent 29%), linear-gradient(125deg, #08192a 0%, #0b2238 57%, #143652 100%); display: grid; grid-template-columns: 1.05fr .8fr; align-items: center; gap: clamp(52px, 8vw, 120px); overflow: hidden; position: relative; }
.hero::after { content:""; position:absolute; width: 460px; height:460px; right:-230px; bottom:-230px; border: 1px solid rgba(255,255,255,.09); border-radius:50%; box-shadow: 0 0 0 72px rgba(255,255,255,.025), 0 0 0 144px rgba(255,255,255,.02); pointer-events:none; }
.hero-copy { position:relative; z-index:2; }
.eyebrow { margin: 0 0 20px; text-transform: uppercase; letter-spacing: .17em; font-size: 11px; font-weight: 800; color: var(--blue); display:flex; align-items:center; gap: 10px; }
.eyebrow span { display:block; width: 27px; height: 2px; background: var(--orange); }
.hero .eyebrow { color: #bcd3e3; }
h1 { margin: 0; font-size: clamp(54px, 6.2vw, 92px); line-height: .94; letter-spacing: -.062em; font-weight: 800; max-width: 850px; }
h1 em { color: var(--orange); font-style: normal; font-weight: 500; }
.hero-lede { color: #c5d3df; max-width: 600px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; margin: 28px 0 34px; }
.hero-actions { display:flex; gap:13px; flex-wrap:wrap; }
.button { appearance:none; border: 0; cursor:pointer; display:inline-flex; justify-content:center; align-items:center; gap:20px; border-radius:999px; min-height:52px; padding: 0 23px; font-weight:800; font-size:13px; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #102236; background: var(--orange); box-shadow: 0 12px 28px rgba(244,163,64,.2); }
.button-primary:hover { background: #ffb454; box-shadow: 0 16px 32px rgba(244,163,64,.28); }
.button-quiet { color: inherit; background: transparent; border: 1px solid currentColor; opacity: .92; }
.review-links { position:relative; z-index:3; margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; }
.review-badge { width:fit-content; max-width:100%; padding:13px 15px; display:flex; align-items:center; gap:14px; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.17); border-radius:15px; transition:transform .2s ease, background .2s ease, border-color .2s ease; }
.review-badge:hover { transform:translateY(-2px); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); }
.review-rating { min-width:68px; font-size:21px; font-weight:850; letter-spacing:-.03em; }
.review-rating b { color:var(--orange); }
.review-copy strong,.review-copy small { display:block; }
.review-copy strong { font-size:13px; }
.review-copy small { margin-top:4px; color:#bcd0df; font-size:10px; }
.review-arrow { margin-left:5px; color:var(--orange); font-size:18px; }
.trust-list { display:flex; gap:22px; padding:0; margin: 20px 0 0; list-style:none; color:#c5d3df; font-size:12px; font-weight:600; flex-wrap:wrap; }
.trust-list span { color:var(--orange); margin-right:4px; }
.hero-card { position:relative; z-index:1; }
.photo-slot { min-height: 440px; margin:0; border-radius: 170px 170px 24px 24px; position:relative; overflow:hidden; color:#fff; background:#173650; border:1px solid rgba(255,255,255,.16); box-shadow: 0 35px 70px rgba(0,0,0,.2); }
.photo-slot::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(5,20,32,.78),transparent 48%); }
.photo-slot img { width:100%; height:100%; min-height:440px; display:block; object-fit:cover; object-position:center 45%; }
.photo-slot figcaption { position:absolute; left:26px; bottom:25px; z-index:1; }
.photo-slot strong,.photo-slot span { display:block; }
.photo-slot strong { color:#fff; font-size:15px; }
.photo-slot span { margin-top:6px; color:#d9e4ec; font-size:11px; }
.availability { position:absolute; left:-30px; bottom:30px; display:flex; align-items:center; gap:12px; background:#fff; color:var(--ink); padding:15px 20px; border-radius:16px; box-shadow:var(--shadow); }
.availability i { width:11px; height:11px; background:#31b66b; border-radius:50%; box-shadow:0 0 0 5px rgba(49,182,107,.15); }
.availability strong,.availability small { display:block; }
.availability strong { font-size:12px; }
.availability small { color:var(--muted); margin-top:4px; font-size:10px; }

.services { padding: 106px var(--page-pad) 96px; background:var(--paper); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:50px; margin-bottom:48px; }
.section-heading h2,.request-copy h2,.work-intro h2,dialog h2 { margin:0; font-size:clamp(34px,4vw,58px); line-height:1.04; letter-spacing:-.045em; }
.section-heading > div { max-width:710px; }
.section-heading > p { max-width:440px; color:var(--muted); line-height:1.7; margin:0 0 4px; font-size:14px; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.service-grid article { min-height:270px; padding:28px 26px; border-right:1px solid var(--line); position:relative; transition:background .2s ease, transform .2s ease; }
.service-grid article:first-child { border-left:1px solid var(--line); }
.service-grid article:hover { background:var(--sky); transform:translateY(-4px); }
.service-number { position:absolute; top:22px; right:22px; color:#99a5ae; font-size:10px; font-weight:800; }
.service-icon { font-size:31px; color:var(--orange); height:70px; display:flex; align-items:center; }
.service-grid h3 { margin:22px 0 12px; font-size:18px; letter-spacing:-.02em; }
.service-grid p { color:var(--muted); font-size:13px; line-height:1.65; margin:0; }
.scope-note { margin:22px 0 0; color:var(--muted); font-size:12px; }
.scope-note strong { color:var(--ink); }

.proof-request { background:var(--navy); color:#fff; padding:100px var(--page-pad) 0; }
.work-intro { max-width:720px; margin-bottom:44px; }
.eyebrow.light { color:#aac0d1; }
.work-intro p:last-child { color:#aebfcd; max-width:590px; font-size:14px; line-height:1.7; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.project-card { background:#fff; color:var(--ink); border-radius:var(--radius); overflow:hidden; }
.project-photos { height:360px; display:grid; grid-template-columns:1fr 1fr; gap:2px; background:#fff; }
.project-photo { position:relative; overflow:hidden; background:#dce9f1; }
.project-photo img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .45s ease; }
.project-card:hover .project-photo img { transform:scale(1.025); }
.project-photo span { position:absolute; top:14px; left:14px; background:rgba(255,255,255,.88); color:var(--ink); padding:6px 9px; border-radius:999px; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.11em; }
.project-caption { display:flex; gap:17px; align-items:center; padding:19px 22px; }
.project-caption > span { font-size:10px; color:#99a5ae; font-weight:800; }
.project-caption p { margin:0; }
.project-caption strong,.project-caption small { display:block; }
.project-caption strong { font-size:14px; }
.project-caption small { color:var(--muted); font-size:11px; margin-top:5px; }
.recent-work-heading { margin:72px 0 28px; display:flex; justify-content:space-between; align-items:end; gap:36px; }
.recent-work-heading h3 { margin:0; max-width:660px; font-size:clamp(30px,3vw,46px); line-height:1.05; letter-spacing:-.04em; }
.recent-work-heading > p { max-width:450px; margin:0 0 5px; color:#aebfcd; font-size:14px; line-height:1.7; }
.recent-work-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:260px; gap:14px; }
.recent-work-card { min-width:0; margin:0; position:relative; overflow:hidden; border-radius:18px; background:#173650; }
.recent-work-card-wide { grid-column:span 2; }
.recent-work-card-tall { grid-row:span 2; }
.recent-work-card::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(4,18,30,.78) 0%,rgba(4,18,30,.08) 53%,transparent 70%); pointer-events:none; }
.recent-work-card img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .45s ease; }
.recent-work-card:hover img { transform:scale(1.035); }
.recent-work-card figcaption { position:absolute; z-index:1; left:20px; right:18px; bottom:18px; }
.recent-work-card strong,.recent-work-card span { display:block; }
.recent-work-card strong { color:#fff; font-size:14px; }
.recent-work-card span { margin-top:5px; color:#c7d7e2; font-size:10px; text-transform:uppercase; letter-spacing:.1em; font-weight:750; }
.request-wrap { margin:94px calc(-1 * var(--page-pad)) 0; padding:90px var(--page-pad); background:var(--cream); color:var(--ink); display:grid; grid-template-columns:.8fr 1.1fr; gap:clamp(50px,8vw,130px); align-items:start; }
.request-copy > p:not(.eyebrow) { color:var(--muted); line-height:1.7; font-size:14px; max-width:470px; }
.contact-card { border-top:1px solid #d8d5ce; margin-top:33px; padding-top:25px; display:flex; align-items:center; gap:15px; }
.contact-icon { width:42px; height:42px; display:grid; place-items:center; background:var(--navy); color:#fff; border-radius:50%; }
.contact-card p { margin:0; }
.contact-card strong,.contact-card span,.contact-phone,.contact-email { display:block; }
.contact-card strong { font-size:13px; }
.contact-card span { color:var(--muted); font-size:11px; margin-top:5px; }
.contact-phone { color:var(--blue); font-size:12px; font-weight:800; margin-top:9px; }
.contact-email { color:var(--muted); font-size:11px; font-weight:700; margin-top:5px; }
.contact-phone:hover,.contact-email:hover { text-decoration:underline; }
.request-form { background:#fff; padding:34px; border-radius:var(--radius); box-shadow:var(--shadow); display:grid; gap:18px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label { display:grid; gap:8px; color:#33465a; font-size:11px; font-weight:800; }
input,select,textarea { width:100%; border:1px solid #dce2e5; border-radius:11px; background:#fbfcfc; color:var(--ink); padding:13px 14px; outline:none; transition:border-color .2s, box-shadow .2s; }
input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(45,115,165,.1); }
textarea { resize:vertical; min-height:112px; }
.submit-button { width:100%; margin-top:3px; }
.form-note { text-align:center; margin:-6px 0 0; color:#8b969e; font-size:10px; }
footer { background:#071728; color:#9fb1bf; padding:34px var(--page-pad); display:flex; align-items:center; justify-content:space-between; gap:25px; font-size:11px; }
.brand-footer { color:#fff; }
footer p { margin:0; }
dialog { width:min(630px,calc(100% - 28px)); color:var(--ink); border:0; border-radius:24px; padding:34px; box-shadow:0 30px 90px rgba(0,0,0,.36); }
dialog::backdrop { background:rgba(4,16,28,.72); backdrop-filter:blur(4px); }
dialog h2 { font-size:34px; margin-bottom:20px; }
.dialog-close { position:absolute; right:18px; top:14px; border:0; background:transparent; font-size:28px; color:var(--muted); cursor:pointer; }
#message-preview { font-size:13px; line-height:1.55; background:#f4f7f8; }
.dialog-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:17px; }
.dialog-note { color:var(--muted); font-size:10px; line-height:1.5; margin:15px 0 0; }

@media (max-width: 900px) {
  nav a:not(.nav-cta) { display:none; }
  .hero { grid-template-columns:1fr; padding-top:130px; }
  .hero-card { max-width:520px; width:100%; margin:auto; }
  .photo-slot { min-height:380px; }
  .section-heading { display:block; }
  .section-heading > p { margin-top:22px; }
  .service-grid { grid-template-columns:1fr 1fr; }
  .service-grid article:nth-child(3) { border-left:1px solid var(--line); }
  .service-grid article:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .gallery { grid-template-columns:1fr 1fr; }
  .gallery .project-card:last-child { grid-column:1 / -1; }
  .recent-work-heading { display:block; }
  .recent-work-heading > p { margin-top:18px; }
  .recent-work-grid { grid-template-columns:repeat(2,1fr); }
  .request-wrap { grid-template-columns:1fr; }
}

@media (max-width: 560px) {
  .site-header { height:72px; }
  .brand-logo { width:188px; }
  nav { gap:0; }
  .nav-cta { padding:10px 13px; font-size:11px; }
  .hero { min-height:auto; padding-bottom:72px; }
  h1 { font-size:52px; }
  .hero-lede { font-size:16px; }
  .hero-actions .button { width:100%; }
  .review-links { display:grid; }
  .review-badge { width:100%; }
  .review-copy { flex:1; }
  .trust-list { display:grid; gap:9px; }
  .photo-slot,.photo-slot img { min-height:330px; }
  .photo-slot { border-radius:120px 120px 20px 20px; }
  .hero-card { padding-bottom:52px; }
  .photo-slot figcaption { bottom:28px; }
  .availability { left:16px; right:16px; bottom:0; width:auto; }
  .services,.proof-request { padding-top:72px; }
  .service-grid { grid-template-columns:1fr; border:0; gap:10px; }
  .service-grid article,.service-grid article:first-child,.service-grid article:nth-child(3) { border:1px solid var(--line); min-height:220px; border-radius:16px; }
  .gallery { grid-template-columns:1fr; }
  .gallery .project-card:last-child { grid-column:auto; }
  .project-photos { height:250px; }
  .recent-work-heading { margin-top:54px; }
  .recent-work-grid { grid-template-columns:1fr; grid-auto-rows:280px; }
  .recent-work-card-wide,.recent-work-card-tall { grid-column:auto; grid-row:auto; }
  .request-wrap { margin-top:68px; padding-top:68px; padding-bottom:68px; }
  .request-form { padding:22px; }
  .field-row { grid-template-columns:1fr; }
  footer { flex-direction:column; text-align:center; }
  .dialog-actions { display:grid; }
  .dialog-actions .button { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; transition:none !important; }
}