*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --dark:   #1a2e2b;
    --darker: #111f1d;
    --teal:   #2e6b65;
    --accent: #4ba89f;
    --cream:  #f5f1ea;
    --warm:   #ece8e0;
    --white:  #ffffff;
    --text:   #1a2e2b;
    --muted:  #6b7f7d;
    --border: #ddd8cf;
  }
  html { scroll-behavior: smooth; }
  body { font-family: 'Outfit', sans-serif; color: var(--text); background: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; }

  /* ── CURSOR ── */
  .cur  { display:none; width:8px; height:8px; background:var(--accent); border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .2s,height .2s,background .2s; }
  .curR { display:none; width:34px; height:34px; border:1.5px solid var(--accent); border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); opacity:.38; transition:width .3s,height .3s; }
  body:has(a:hover) .cur  { display:none; width:13px; height:13px; background:var(--teal); }
  body:has(a:hover) .curR { display:none; width:46px; height:46px; opacity:.18; }

  /* ── PROGRESS ── */
  .prog { position:fixed; top:0; left:0; height:2px; background:linear-gradient(to right,var(--accent),var(--teal)); z-index:300; width:0; }

  /* ── NAV ── */
  nav {
    position:fixed; top:0; left:0; right:0; z-index:200;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 64px; height:72px;
    background:rgba(255,255,255,.96); backdrop-filter:blur(20px);
    border-bottom:1px solid transparent;
    transition:border-color .3s, box-shadow .3s;
  }
  nav.scrolled { border-color:var(--border); box-shadow:0 4px 32px rgba(0,0,0,.07); }
  .nav-logo img { width:auto; height:26px; display:block; }
  .nav-links { display:flex; align-items:center; gap:40px; list-style:none; }
  .nav-links a { font-size:13px; font-weight:500; color:var(--muted); text-decoration:none; letter-spacing:.3px; position:relative; padding-bottom:2px; transition:color .2s; }
  .nav-links a::after { content:''; position:absolute; bottom:-2px; left:0; right:100%; height:1.5px; background:var(--accent); transition:right .28s ease; }
  .nav-links a:hover { color:var(--text); }
  .nav-links a:hover::after { right:0; }
  .nav-cta { background:var(--dark) !important; color:var(--white) !important; padding:10px 26px; font-size:13px; font-weight:500; text-decoration:none; display:inline-block; transition:background .2s,transform .2s !important; }
  .nav-cta:hover { background:var(--teal) !important; transform:translateY(-1px) !important; }
  .nav-cta::after { display:none !important; }

  /* ── HERO ── */
  #home { min-height:100vh; display:grid; grid-template-columns:48% 52%; padding-top:72px; overflow:hidden; }
  .hero-left { display:flex; flex-direction:column; justify-content:center; padding:80px 68px; background:var(--white); position:relative; }
  .hero-left::after { content:''; position:absolute; right:0; top:8%; bottom:8%; width:1px; background:var(--border); }
  .htag { display:inline-flex; align-items:center; gap:10px; font-size:10.5px; font-weight:500; letter-spacing:2.5px; text-transform:uppercase; color:var(--teal); margin-bottom:26px; opacity:0; animation:fadeUp .7s .3s ease forwards; }
  .htag::before { content:''; width:22px; height:1px; background:var(--teal); }
  .hero-h1 { font-family:'Playfair Display',serif; font-size:clamp(40px,5vw,66px); font-weight:700; line-height:1.08; color:var(--text); margin-bottom:24px; opacity:0; animation:fadeUp .8s .5s ease forwards; }
  .hero-h1 em { font-style:italic; color:var(--teal); font-weight:400; }
  .hero-sub { font-size:15.5px; font-weight:300; color:var(--muted); line-height:1.82; max-width:430px; margin-bottom:40px; opacity:0; animation:fadeUp .8s .7s ease forwards; }
  .hero-btns { display:flex; gap:12px; flex-wrap:wrap; opacity:0; animation:fadeUp .7s .9s ease forwards; }
  .btn-p { background:var(--dark); color:var(--white); padding:14px 34px; font-size:14px; font-weight:500; text-decoration:none; transition:background .2s,transform .2s; display:inline-block; }
  .btn-p:hover { background:var(--teal); transform:translateY(-2px); }
  .btn-g { border:1.5px solid var(--border); color:var(--text); padding:14px 34px; font-size:14px; font-weight:400; text-decoration:none; transition:border-color .22s,color .22s,transform .2s; display:inline-block; }
  .btn-g:hover { border-color:var(--teal); color:var(--teal); transform:translateY(-2px); }
  .hero-right { position:relative; overflow:hidden; opacity:0; animation:fadeIn 1.1s .15s ease forwards; }
  .hero-right img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform 12s ease; }
  #home:hover .hero-right img { transform:scale(1.03); }
  .hero-right::before { content:''; position:absolute; inset:0; background:linear-gradient(to right,rgba(255,255,255,.08),transparent 20%); z-index:1; pointer-events:none; }

  /* ── TEAL RULE ── */
  .rule { height:3px; background:linear-gradient(to right,var(--accent),var(--teal)); }

  /* ── MARQUEE ── */
  .mq-wrap { background:var(--darker); overflow:hidden; padding:15px 0; }
  .mq-track { display:flex; animation:marquee 30s linear infinite; white-space:nowrap; }
  .mq-track:hover { animation-play-state:paused; }
  .mq-item { display:inline-flex; align-items:center; gap:22px; padding:0 22px; font-size:11px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.32); flex-shrink:0; }
  .mq-item::before { content:'✦'; color:var(--accent); font-size:6px; }
  @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

  /* ── SHARED ── */
  .slabel { display:inline-flex; align-items:center; gap:10px; font-size:10.5px; font-weight:500; letter-spacing:2.5px; text-transform:uppercase; color:var(--teal); margin-bottom:16px; }
  .slabel::before { content:''; width:20px; height:1px; background:var(--teal); }
  .stitle { font-family:'Playfair Display',serif; font-size:clamp(30px,3.8vw,50px); font-weight:700; line-height:1.13; color:var(--text); }
  .stitle em { font-style:italic; color:var(--teal); font-weight:400; }

  /* ── WORK ── */
  #work { background:var(--cream); padding:100px 60px 0; }
  .work-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:48px; gap:40px; }
  .work-head-body { font-size:15px; font-weight:300; color:var(--muted); max-width:360px; line-height:1.75; flex-shrink:0; }
  .gallery { display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:290px 290px; gap:3px; }
  .gi { overflow:hidden; position:relative; transition:opacity .65s ease; }
  .gi img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .gi:hover img { transform:scale(1.06); }
  .g1{grid-column:span 5} .g2{grid-column:span 4} .g3{grid-column:span 3}
  .g4{grid-column:span 3} .g5{grid-column:span 5} .g6{grid-column:span 4}
  .gcap { position:absolute; inset:0; display:flex; align-items:flex-end; padding:18px; background:linear-gradient(to top,rgba(17,31,29,.82),transparent 55%); opacity:0; transition:opacity .28s; }
  .gi:hover .gcap { opacity:1; }
  .gcap span { font-size:11px; font-weight:500; color:rgba(255,255,255,.88); letter-spacing:.6px; }

  /* ── SERVICES ── */
  #services { background:var(--white); padding:100px 60px; }
  .svc-layout { display:grid; grid-template-columns:1fr 2.1fr; gap:80px; align-items:start; margin-top:56px; }
  .svc-intro { font-size:15px; font-weight:300; color:var(--muted); line-height:1.82; margin-top:18px; }
  .svc-note { margin-top:22px; padding:16px 20px; border-left:3px solid var(--accent); background:var(--cream); font-size:13px; color:var(--text); line-height:1.65; }
  .svc-grid { display:flex; flex-direction:column; gap:2px; }
  .sc { display:grid; grid-template-columns:52px 1fr 20px; align-items:start; gap:20px; padding:28px 30px; border:1px solid var(--border); background:var(--white); transition:all .28s ease; cursor:default; }
  .sc:hover { background:var(--dark); border-color:var(--dark); transform:translateX(5px); }
  .sc:hover .sc-n { color:var(--accent); }
  .sc:hover .sc-t { color:var(--white); }
  .sc:hover .sc-b { color:rgba(255,255,255,.5); }
  .sc:hover .sc-a { color:var(--accent); opacity:1; }
  .sc-n { font-family:'Playfair Display',serif; font-size:24px; font-weight:400; color:var(--border); transition:color .28s; line-height:1; padding-top:3px; }
  .sc-t { font-size:16px; font-weight:600; color:var(--text); margin-bottom:8px; transition:color .28s; }
  .sc-b { font-size:13px; font-weight:300; color:var(--muted); line-height:1.7; transition:color .28s; }
  .sc-a { font-size:17px; color:var(--border); opacity:0; transition:all .28s; align-self:center; }

  /* ── ABOUT ── */
  #about { background:var(--cream); display:grid; grid-template-columns:40% 1fr; min-height:640px; padding:0; }
  .ab-img { position:relative; overflow:hidden; }
  .ab-img img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform 8s ease; }
  #about:hover .ab-img img { transform:scale(1.03); }
  .ab-img-ov { position:absolute; inset:0; background:linear-gradient(to right,transparent 52%,var(--cream) 100%); }
  .ab-content { display:flex; flex-direction:column; justify-content:center; padding:80px 76px 80px 56px; }
  .ab-h2 { font-family:'Playfair Display',serif; font-size:clamp(28px,3.2vw,44px); font-weight:700; color:var(--text); line-height:1.15; margin-bottom:6px; margin-top:16px; }
  .ab-role { font-size:13.5px; color:var(--teal); margin-bottom:26px; font-weight:500; }
  .ab-content p { font-size:15px; font-weight:300; color:var(--muted); line-height:1.85; margin-bottom:16px; max-width:470px; }
  .ab-div { height:1px; background:var(--border); margin:24px 0; max-width:470px; }
  .ab-quals { display:flex; gap:8px; flex-wrap:wrap; }
  .ab-qual { padding:14px 20px; border:1px solid var(--border); background:var(--white); transition:all .25s; }
  .ab-qual:hover { background:var(--dark); border-color:var(--dark); }
  .ab-qual:hover .aq-val { color:var(--white); }
  .ab-qual:hover .aq-lab { color:var(--accent); }
  .aq-val { font-size:13px; font-weight:600; color:var(--text); margin-bottom:3px; transition:color .25s; }
  .aq-lab { font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; transition:color .25s; }

  /* ── CONTACT ── */
  #contact { background:var(--white); padding:100px 60px; }
  .ct-layout { display:grid; grid-template-columns:1fr 1fr; gap:88px; margin-top:56px; align-items:start; }
  .ct-intro { font-size:15px; font-weight:300; color:var(--muted); line-height:1.82; margin-top:18px; max-width:400px; }
  .email-strip { display:block; text-decoration:none; background:var(--cream); border-left:4px solid var(--accent); padding:28px 32px; margin-top:36px; transition:background .2s,transform .2s; }
  .email-strip:hover { background:var(--warm); transform:translateX(4px); }
  .es-lab { font-size:10px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:var(--teal); margin-bottom:9px; }
  .es-val { font-family:'Playfair Display',serif; font-size:clamp(15px,1.9vw,23px); font-weight:400; color:var(--text); transition:color .2s; word-break:break-all; }
  .email-strip:hover .es-val { color:var(--teal); }
  .ct-cards { display:flex; flex-direction:column; }
  .ctc { display:flex; align-items:center; gap:18px; padding:24px 0; border-bottom:1px solid var(--border); text-decoration:none; transition:all .2s; }
  .ctc:first-child { border-top:1px solid var(--border); }
  .ctc-icon { width:42px; height:42px; background:var(--cream); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .22s; }
  .ctc-icon svg { width:17px; height:17px; stroke:var(--teal); transition:stroke .22s; }
  .ctc:hover .ctc-icon { background:var(--dark); }
  .ctc:hover .ctc-icon svg { stroke:var(--accent); }
  .ctc-lab { font-size:10px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:var(--teal); margin-bottom:3px; }
  .ctc-val { font-size:16.5px; font-weight:400; color:var(--text); transition:color .2s; }
  .ctc:hover .ctc-val { color:var(--teal); }
  .ctc-arr { margin-left:auto; font-size:17px; color:var(--border); transition:color .2s,transform .22s; }
  .ctc:hover .ctc-arr { color:var(--teal); transform:translateX(4px); }

  /* ── FOOTER ── */
  footer { background:var(--darker); padding:26px 60px; display:flex; align-items:center; justify-content:space-between; }
  .ft-logo img { width:auto; height:20px; filter:brightness(0) invert(1); opacity:.6; }
  .ft-links { display:flex; gap:26px; }
  .ft-links a { color:rgba(255,255,255,.28); text-decoration:none; font-size:12px; transition:color .2s; }
  .ft-links a:hover { color:var(--accent); }
  .ft-copy { font-size:11.5px; color:rgba(255,255,255,.25); }

  /* ── ANIMATIONS ── */
  .rv, .rvl, .rvr { transition:opacity .72s ease,transform .72s ease; }
  .rvs { transition:opacity .68s ease,transform .68s ease; }
  .d1{transition-delay:.08s} .d2{transition-delay:.17s} .d3{transition-delay:.26s} .d4{transition-delay:.35s}
  @keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }

  /* ── RESPONSIVE ── */
  @media(max-width:1024px){
    nav { padding:0 32px; }
    #home { grid-template-columns:1fr; }
    .hero-right { display:none; }
    .hero-left { padding:80px 32px 60px; }
    .hero-left::after { display:none; }
    #work,#services,#contact { padding:72px 32px; }
    #work { padding-bottom:0; }
    .gallery { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
    .g1,.g2,.g3,.g4,.g5,.g6 { grid-column:span 1; height:220px; }
    .svc-layout { grid-template-columns:1fr; gap:32px; }
    #about { grid-template-columns:1fr; }
    .ab-img { height:420px; }
    .ab-content { padding:56px 32px; }
    .ct-layout { grid-template-columns:1fr; gap:48px; }
    footer { flex-direction:column; gap:14px; padding:24px 32px; text-align:center; }
  }

/* Progressive enhancement: content remains readable when scripting is unavailable. */
body.reveal-ready .rv,
body.reveal-ready .rvl,
body.reveal-ready .rvr,
body.reveal-ready .rvs,
body.reveal-ready .gi,
body.reveal-ready .sc { opacity:0; }
body.reveal-ready .rv { transform:translateY(26px); }
body.reveal-ready .rvl { transform:translateX(-28px); }
body.reveal-ready .rvr { transform:translateX(28px); }
body.reveal-ready .rvs { transform:scale(.96); }
body.reveal-ready .visible { opacity:1; transform:none; }
.g2 { transition-delay:.09s; }
.g3 { transition-delay:.18s; }
.g4 { transition-delay:.27s; }
.g5 { transition-delay:.36s; }
.g6 { transition-delay:.45s; }
.ctc-static { pointer-events:none; cursor:default; }
section { scroll-margin-top:72px; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }

@media (hover:hover) and (pointer:fine) {
  body.custom-cursor { cursor:none; }
  body.custom-cursor .cur, body.custom-cursor .curR { display:block; }
}

/* Retain the existing layout while allowing navigation and contact text to fit phones. */
@media (max-width:600px) {
  nav { padding:0 20px; }
  .nav-logo img { height:22px; }
  .nav-links { gap:14px; }
  .nav-links a { font-size:12px; }
  .nav-cta { padding:10px 14px; }
  .work-head { flex-direction:column; align-items:flex-start; gap:24px; }
  .work-head-body { max-width:100%; flex-shrink:1; }
  .sc { grid-template-columns:36px minmax(0,1fr) 16px; gap:12px; padding:24px 20px; }
  .ct-layout > *, .ctc > div { min-width:0; }
  .ctc-val { overflow-wrap:anywhere; }
}
@media (max-width:380px) {
  nav { padding:0 12px; }
  .nav-links { gap:10px; }
  .nav-logo img { height:18px; }
  .nav-cta { padding:10px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .htag, .hero-h1, .hero-sub, .hero-btns, .hero-right,
  body.reveal-ready .rv, body.reveal-ready .rvl, body.reveal-ready .rvr,
  body.reveal-ready .rvs, body.reveal-ready .gi, body.reveal-ready .sc {
    opacity:1; transform:none;
  }
  .mq-track { flex-wrap:wrap; white-space:normal; gap:12px 0; }
  .mq-item[aria-hidden="true"] { display:none; }
}