@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#FFFFFF;
  --bg-soft:#F6F6F4;
  --ink:#1B1D22;
  --ink-soft:#5B616D;
  --line: rgba(27,29,34,0.10);
  --line-strong: rgba(27,29,34,0.18);
  --blue:#3454D1;       /* build / web & systems */
  --blue-soft:#EAEEFC;
  --rose:#B5406E;        /* capture / photography */
  --rose-soft:#F7E9EF;
  --accent: var(--blue);
  --accent-soft: var(--blue-soft);
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(27,29,34,0.04), 0 8px 24px rgba(27,29,34,0.06);
}
body.mode-photo{ --accent: var(--rose); --accent-soft: var(--rose-soft); }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter', sans-serif; font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:'Manrope', sans-serif; font-weight:700; letter-spacing:-0.015em; margin:0; color:var(--accent); transition:color .35s ease; }
a{ color:inherit; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }
.kw{ color:var(--accent); transition:color .35s ease; }
.dim{ color:var(--ink-soft); }
.eyebrow{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); transition:color .35s ease; }

/* header / nav */
header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.navbar{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1080px; margin:0 auto; gap:20px; flex-wrap:wrap; }
.brand-wrap{ display:flex; align-items:center; gap:10px; }
.brand-logo{
  width:28px; height:28px; opacity:0.8; filter:grayscale(1) contrast(1.1) brightness(0.9);
  display:block; object-fit:contain; flex-shrink:0;
}
.brand-home{ text-decoration:none; color:inherit; display:inline-flex; align-items:center; }
.brand{ font-family:'Manrope',sans-serif; font-weight:800; font-size:19px; }
.brand span{ color:var(--accent); transition:color .35s ease; }
.navlinks{ display:flex; gap:26px; }
.navlinks a{
  text-decoration:none; font-size:15px; font-weight:600; color:var(--ink-soft); padding:8px 10px; border-radius:999px;
  transition:color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.navlinks a:hover,
.navlinks a:focus-visible{
  color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px rgba(52,84,209,0.08);
  transform:translateY(-1px);
}

.toggle-wrap{ position:sticky; top:16px; z-index:60; display:flex; justify-content:flex-end; }
.toggle{
  position:relative; display:inline-flex; align-items:center; gap:2px; background:rgba(255,255,255,0.82);
  border:1px solid var(--line-strong); border-radius:999px; padding:4px; box-shadow:0 8px 24px rgba(27,29,34,0.08);
  backdrop-filter:blur(8px);
}
.toggle-slider{
  position:absolute; top:4px; left:4px; width:calc(50% - 6px); height:calc(100% - 8px); border-radius:999px;
  background:var(--blue); box-shadow:0 6px 18px rgba(52,84,209,0.18); transition:transform .25s ease, background .25s ease;
}
.toggle button{
  position:relative; z-index:1; border:none; background:transparent; padding:9px 16px; font-size:14px; font-weight:600;
  border-radius:999px; cursor:pointer; color:var(--ink-soft); min-width:150px; transition:color .25s ease;
}
.toggle button.active{ color:#fff; }
body.mode-photo .toggle-slider{ transform:translateX(100%); background:var(--rose); }
body.mode-web .toggle-slider{ transform:translateX(0%); background:var(--blue); }

@media (max-width:760px){ .navlinks{ display:none; } }

/* hero */
.hero{ padding:76px 0 60px; }
.hero .eyebrow{ margin-bottom:16px; }
.hero h1{ font-size:clamp(32px,5.5vw,54px); line-height:1.08; max-width:16ch; }
.hero p.lede{ margin-top:20px; max-width:56ch; font-size:18px; line-height:1.65; color:var(--ink-soft); }
.hero .ctas{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 26px; font-size:15px; font-weight:700;
  text-decoration:none; border-radius:999px; font-family:'Inter',sans-serif;
  transition:transform .2s ease, background .3s ease, color .3s ease, border-color .3s ease;
}
.btn-primary{ background:var(--accent); color:#fff; border:1px solid var(--accent); }
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--ink); background:#fff; }
.btn-ghost:hover{ border-color:var(--ink); }

section{ padding:60px 0; border-top:1px solid var(--line); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(24px,3vw,34px); max-width:18ch; }
.section-head p{ color:var(--ink-soft); max-width:42ch; font-size:15.5px; line-height:1.65; }

/* service cards */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow); }
.card .num{ font-size:13px; font-weight:700; color:var(--accent); transition:color .35s ease; }
.card h3{ font-size:18px; margin:14px 0 8px; }
.card p{ font-size:14.5px; color:var(--ink-soft); line-height:1.65; margin:0; }
@media (max-width:760px){ .cards{ grid-template-columns:1fr; } }

/* process steps */
.process{ display:flex; flex-direction:column; }
.step{ display:grid; grid-template-columns:48px 1fr; gap:18px; padding:20px 0; border-top:1px solid var(--line); }
.step:first-child{ border-top:none; }
.step .num{
  width:36px; height:36px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
  transition:background .35s ease, color .35s ease;
}
.step h4{ font-size:16.5px; margin:0 0 6px; }
.step p{ margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.65; max-width:58ch; }

/* pricing */
.pricing{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:16px; }
.price-card{ border:1px solid var(--line); padding:26px 24px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; }
.price-card.featured{ background:var(--accent-soft); border-color:var(--accent); transition:background .35s ease, border-color .35s ease; }
.price-tier{ font-family:'Manrope',sans-serif; font-size:17px; font-weight:700; }
.price-num{ font-family:'Manrope',sans-serif; font-size:30px; font-weight:800; }
.price-num sup{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.price-note{ font-size:14px; color:var(--ink-soft); line-height:1.6; flex:1; }
.price-card ul{ list-style:none; margin:0; padding:0; font-size:13.5px; line-height:2; color:var(--ink-soft); }
.price-card li::before{ content:'✓ '; color:var(--accent); font-weight:700; transition:color .35s ease; }
.price-cta{ width:auto; min-width:160px; justify-content:center; margin-top:8px; align-self:flex-start; }
@media (max-width:760px){ .pricing{ grid-template-columns:1fr; } }

/* portfolio */
.portfolio{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pf-card{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; box-shadow:var(--shadow); transition:transform .2s ease, border-color .2s ease; }
.pf-card:hover{ transform:translateY(-2px); border-color:var(--line-strong); }
.pf-thumb{
  aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; color:var(--accent); border-bottom:1px solid var(--line);
  background:linear-gradient(135deg, var(--accent-soft), #fff); transition:background .35s ease, color .35s ease;
  overflow:hidden;
}
.pf-thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.pf-body{ padding:18px 20px; }
.pf-body .tag{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); transition:color .35s ease; }
.pf-body h3{ font-size:16px; margin:8px 0 6px; }
.pf-body p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0; }
.disabled-app-card{ opacity:.88; }
@media (max-width:760px){ .portfolio{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .portfolio{ grid-template-columns:1fr; } }

/* photography filler frames */
.filmstrip{ display:grid; grid-template-columns:repeat(5, minmax(170px, 1fr)); gap:14px; }
.frame{
  aspect-ratio:600/725; border-radius:12px; border:1px dashed var(--line-strong);
  background:linear-gradient(135deg, var(--rose-soft), #fff);
  display:flex; align-items:flex-end; padding:10px; position:relative;
  min-height:260px;
  max-width:600px;
  margin:0 auto;
}
.frame .cap{ font-size:11px; font-weight:600; color:var(--ink-soft); }
@media (max-width:760px){ .filmstrip{ grid-template-columns:repeat(2, minmax(170px, 1fr)); } }

/* about */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.about p{ color:var(--ink-soft); font-size:15.5px; line-height:1.75; }
@media (max-width:760px){ .about{ grid-template-columns:1fr; } }

/* contact */
.contact-panel{ max-width:560px; margin:0 auto; }
.contact-box{ border:1px solid var(--line); border-radius:var(--radius); padding:32px 28px; background:#fff; box-shadow:var(--shadow); }
.contact-box .tag{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); transition:color .35s ease; }
.contact-box h3{ font-size:22px; margin:12px 0 10px; }
.contact-box p{ color:var(--ink-soft); font-size:15px; line-height:1.7; margin:0 0 22px; }
.contact-form{ display:flex; flex-direction:column; gap:18px; }
.field-row{ display:flex; flex-direction:column; }
.field-row.two-up{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:600; color:var(--ink); }
.field span{ color:var(--ink); }
.required-mark{ color:#d23434; font-weight:700; }
.field input,
.field select,
.field textarea{
  width:100%; border:1px solid var(--line-strong); border-radius:10px; background:#fff; padding:12px 14px;
  font:inherit; color:var(--ink); resize:vertical; transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(52,84,209,0.12);
}
.field textarea{ min-height:120px; }
.form-actions{ display:flex; justify-content:flex-start; margin-top:6px; }

footer{ border-top:1px solid var(--line); padding:28px 0; }
footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:14px; color:var(--ink-soft); }
footer a{ text-decoration:none; }
footer a:hover{ color:var(--ink); }
.foot-links{ display:flex; gap:20px; flex-wrap:wrap; }

/* legal pages */
.legal{ max-width:760px; padding:56px 24px 80px; margin:0 auto; }
.legal h1{ font-size:30px; }
.legal h2{ font-size:20px; margin:36px 0 12px; }
.legal h2:first-of-type{ margin-top:0; }
.legal p, .legal li{ color:var(--ink-soft); font-size:15px; line-height:1.8; }
.legal ol, .legal ul{ padding-left:20px; }
.legal .updated{ font-size:13px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; }

[data-mode]{ display:none; }
body.mode-web [data-mode="web"]{ display:block; }
body.mode-photo [data-mode="photo"]{ display:block; }
body.mode-web [data-mode="web"].grid-cards, body.mode-photo [data-mode="photo"].grid-cards{ display:grid; }
body.mode-web [data-mode="web"].flex-cards, body.mode-photo [data-mode="photo"].flex-cards{ display:flex; }