/* Chiseled Construct — brand system
   Fonts: Raleway (their site display) + Open Sans (their site body)
   Palette from their logo + photography. Signature device: chiselled 45° corner. */

:root{
  --ink:#16181B;
  --white:#FFFFFF;
  --stone:#F4F1EB;
  --stone-line:#E7E1D6;
  --cyan:#00ADF0;
  --cyan-deep:#0089BE;
  --grey:#736B6B;
  --body:#3F4247;
  --cham:16px;
  --max:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Open Sans',system-ui,sans-serif;font-size:17px;line-height:1.6;color:var(--body);background:var(--white)}
img{max-width:100%;display:block}
a{color:var(--cyan-deep)}

h1,h2,h3,.disp{font-family:'Raleway',sans-serif;font-weight:800;color:var(--ink);line-height:1.1;letter-spacing:-.01em;text-transform:uppercase}
h1{font-size:clamp(34px,5vw,58px)}
h2{font-size:clamp(26px,3.6vw,40px)}
h3{font-size:20px}
.sub{font-family:'Raleway',sans-serif;font-weight:300;letter-spacing:.3em;text-transform:uppercase;font-size:14px;color:var(--grey)}
.sub.on-dark{color:#B9BDC3}

.cham{clip-path:polygon(var(--cham) 0,100% 0,100% calc(100% - var(--cham)),calc(100% - var(--cham)) 100%,0 100%,0 var(--cham))}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--stone-line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:80px}
.site-header .logo img{height:34px;width:auto}
.nav-links{display:flex;gap:32px;list-style:none;align-items:center}
.nav-links a{font-family:'Raleway',sans-serif;font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:8px 0}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--cyan-deep)}
.nav-cta{background:var(--ink);color:#fff !important;padding:14px 22px !important;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.nav-cta:hover{background:var(--cyan-deep);color:#fff !important}
.menu-btn{display:none;background:none;border:1px solid var(--stone-line);padding:12px 14px;cursor:pointer;font-family:'Raleway',sans-serif;font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

/* mobile drawer: base hidden always */
.drawer{display:none}

/* ---------- hero ---------- */
.hero{position:relative;height:min(88vh,760px);min-height:520px}
.hero img,.hero video{width:100%;height:100%;object-fit:cover}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,17,20,.06) 35%,rgba(15,17,20,.78))}
.hero .hero-copy{position:absolute;left:0;right:0;bottom:0;padding:0 24px 64px}
.hero .hero-copy > div{max-width:var(--max);margin:0 auto}
.hero h1{color:#fff;max-width:14ch}
.hero .sub{color:#D8DCE1;margin-top:16px}
.hero .actions{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap}

/* page hero (subpages) */
.page-hero{position:relative;height:340px}
.page-hero img{width:100%;height:100%;object-fit:cover}
.page-hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,17,20,.15),rgba(15,17,20,.72))}
.page-hero .hero-copy{position:absolute;left:0;right:0;bottom:0;padding:0 24px 48px}
.page-hero .hero-copy > div{max-width:var(--max);margin:0 auto}
.page-hero h1{color:#fff}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:'Raleway',sans-serif;font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:18px 32px;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:background .2s,color .2s}
.btn-solid{background:var(--cyan);color:#fff}
.btn-solid:hover{background:var(--cyan-deep)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:0;outline:1px solid rgba(255,255,255,.55);outline-offset:-1px}
.btn-ghost:hover{background:#fff;color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--cyan-deep)}

/* ---------- sections ---------- */
.section{padding:96px 0}
.section.tight{padding:72px 0}
.section.stone{background:var(--stone)}
.section.dark{background:var(--ink)}
.section.dark h2,.section.dark h3{color:#fff}
.section.dark p{color:#C6CAD0}
.lockup{margin-bottom:40px}
.lockup .sub{display:block;margin-top:10px}
.lede{font-size:19px;max-width:64ch;color:var(--body)}

/* statement band */
.statement{max-width:880px;margin:0 auto;text-align:center}
.statement .disp{font-size:clamp(24px,3.2vw,36px);line-height:1.25;text-transform:none;font-weight:600;letter-spacing:0}
.statement .disp em{font-style:normal;color:var(--cyan-deep)}

/* feature strip */
.strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-top:48px}
.strip figure{position:relative}
.strip img{width:100%;height:340px;object-fit:cover}
.strip figcaption{margin-top:12px;font-family:'Raleway',sans-serif;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}

/* split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.split img{width:100%;height:520px;object-fit:cover}
.split .content h2{margin-bottom:20px}
.split .content p{margin-bottom:16px}

/* full-bleed photo band */
.photo-band{position:relative;height:480px}
.photo-band img{width:100%;height:100%;object-fit:cover}
.photo-band .veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,17,20,.68),rgba(15,17,20,.05) 55%)}
.photo-band .band-copy{position:absolute;left:0;right:0;bottom:0;padding:0 24px 48px}
.photo-band .band-copy > div{max-width:var(--max);margin:0 auto;color:#fff}
.photo-band .band-copy h2{color:#fff}
.photo-band .band-copy p{color:#D8DCE1;max-width:56ch;margin-top:12px}

/* services — alternating photo splits, no numbering */
.svc-alt{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:56px 0}
.svc-alt img{width:100%;height:440px;object-fit:cover}
.svc-alt.flip .media{order:2}
.svc-alt h3{font-size:24px;margin-bottom:14px;padding-top:14px;position:relative}
.svc-alt h3::before{content:"";position:absolute;top:0;left:0;width:34px;height:5px;background:var(--cyan);clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.svc-alt p{margin-bottom:12px;max-width:56ch}

/* named process phases */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
.step{background:var(--paper,#fff);padding:28px;border:1px solid var(--stone-line)}
.section.dark .step{background:#1F2226;border-color:#2A2D31}
.step h3{font-size:16px;letter-spacing:.08em;margin-bottom:10px;padding-top:12px;position:relative}
.section.dark .step h3{color:#fff}
.step h3::before{content:"";position:absolute;top:0;left:0;width:26px;height:4px;background:var(--cyan);clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.step p{font-size:15px;margin:0}
.section.dark .step p{color:#B9BDC3}

/* values rows (about) */
.val{padding:36px 0;border-bottom:1px solid var(--stone-line);display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:start}
.val:last-of-type{border-bottom:none}
.val h3{padding-top:12px;position:relative}
.val h3::before{content:"";position:absolute;top:0;left:0;width:34px;height:5px;background:var(--cyan);clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.val p{max-width:62ch;margin:0}

/* projects */
.project{margin-bottom:88px}
.project:last-child{margin-bottom:0}
.project .p-hero{width:100%;height:560px;object-fit:cover}
.project .p-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.project .p-grid img{width:100%;height:380px;object-fit:cover}
.project .p-meta{margin-top:24px;max-width:70ch}
.project .p-meta h3{margin-bottom:8px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.contact-list{list-style:none;margin-top:24px}
.contact-list li{padding:16px 0;border-bottom:1px solid var(--stone-line);font-size:17px}
.contact-list a{color:var(--ink);text-decoration:none;font-weight:600;display:inline-block;padding:13px 0;margin:-13px 0}
.contact-list a:hover{color:var(--cyan-deep)}
.contact-list .lab{display:block;font-family:'Raleway',sans-serif;font-weight:300;letter-spacing:.24em;text-transform:uppercase;font-size:12px;color:var(--grey);margin-bottom:4px}
form .field{margin-bottom:20px}
form label{display:block;font-family:'Raleway',sans-serif;font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
form input,form textarea{width:100%;padding:16px;border:1px solid var(--stone-line);background:var(--white);font-family:'Open Sans',sans-serif;font-size:16px;color:var(--ink)}
form input:focus,form textarea:focus{outline:2px solid var(--cyan);outline-offset:-1px}
form button{border:0;cursor:pointer}

/* faq */
.faq-list{max-width:820px}
.faq-list details{border-bottom:1px solid var(--stone-line)}
.faq-list summary{cursor:pointer;list-style:none;padding:22px 0;font-family:'Raleway',sans-serif;font-weight:600;font-size:17px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-weight:300;font-size:26px;color:var(--cyan);flex-shrink:0}
.faq-list details[open] summary::after{content:"–"}
.faq-list details p{padding:0 0 22px;max-width:64ch}

/* cta band */
.cta-band{text-align:center}
.cta-band h2{color:#fff;max-width:20ch;margin:0 auto 16px}
.cta-band p{max-width:52ch;margin:0 auto 32px}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#C6CAD0;padding:72px 0 40px}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:48px}
.f-word{font-family:'Raleway',sans-serif;font-weight:800;font-size:20px;letter-spacing:.02em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.f-word span{font-weight:300;letter-spacing:.3em;color:#B9BDC3;font-size:15px;margin-left:8px}
.site-footer h4{font-family:'Raleway',sans-serif;font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:10px}
.site-footer a{color:#C6CAD0;text-decoration:none;font-size:15px}
.site-footer a:hover{color:var(--cyan)}
.site-footer .fine{margin-top:56px;padding-top:24px;border-top:1px solid #2A2D31;font-size:13.5px;color:#8A8F96;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- motion (carve-in reveals) ---------- */
.hero h1{animation:carve .9s cubic-bezier(.2,.6,.2,1) .2s both}
.hero .sub{animation:riseIn .6s ease .8s both}
.hero .actions{animation:riseIn .6s ease 1s both}
@keyframes carve{from{clip-path:inset(0 100% 0 0);transform:translateX(-14px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
img.rv{transform:none;clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.2,.6,.2,1),opacity .5s ease}
img.rv.in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .hero h1,.hero .sub,.hero .actions{animation:none}
  .rv,img.rv{opacity:1;transform:none;clip-path:none;transition:none}
}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:40px}
  .split img{height:400px}
  .strip{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .svc-alt{grid-template-columns:1fr;gap:28px;padding:40px 0}
  .svc-alt.flip .media{order:0}
  .svc-alt img{height:300px}
  .steps{grid-template-columns:1fr 1fr}
  .val{grid-template-columns:1fr;gap:12px;padding:28px 0}
  .project .p-grid{grid-template-columns:1fr}
  .project .p-hero{height:380px}
}
@media(max-width:760px){
  body{font-size:16px}
  .section{padding:64px 0}
  .section.tight{padding:56px 0}
  .nav-links{display:none}
  .menu-btn{display:block}
  .drawer.open{display:block;position:fixed;inset:80px 0 0 0;background:var(--white);z-index:49;padding:32px 24px;overflow:auto}
  .drawer ul{list-style:none}
  .drawer li{border-bottom:1px solid var(--stone-line)}
  .drawer a{display:block;padding:18px 4px;font-family:'Raleway',sans-serif;font-weight:600;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;min-height:48px}
  .hero{min-height:520px}
  .hero .hero-copy{padding-bottom:44px}
  .hero .sub{font-size:12px;letter-spacing:.22em}
  .hero .actions .btn{padding:16px 24px}
  .page-hero{height:260px}
  .page-hero .hero-copy{padding-bottom:32px}
  .photo-band{height:400px}
  .photo-band .band-copy{padding-bottom:36px}
  .statement .disp{font-size:21px}
  .strip img{height:260px}
  .split img{height:320px}
  .steps{grid-template-columns:1fr;gap:16px}
  .cta-band .btn{width:100%;max-width:340px}
  .contact-list li{padding:14px 0}
  .site-footer{padding:56px 0 32px}
  .site-footer .cols{grid-template-columns:1fr;gap:36px}
  .site-footer .fine{flex-direction:column;gap:8px}
}