/*
 * Dcorals page styles — ported from the approved design's inline stylesheet.
 * Loads after base.css; the :root block below overrides the base tokens
 * with the real Dcorals palette (cascade order matters — keep this file
 * enqueued after base.css). Only change from the source: the design tool's
 * <image-slot> placeholder element is replaced with a plain .dc-image
 * wrapper (an <img> when a Customizer image is set, a dashed-border
 * placeholder box otherwise) — selectors renamed to match, rules unchanged.
 */
:root{
  --color-bg:#f4efe6;--color-surface:#ece4d6;--color-text:#201c17;
  --color-accent:#b5451f;--color-accent-100:#f7ede5;--color-accent-200:#edd6c7;
  --color-accent-600:#9b3a18;--color-accent-700:#7e2f12;--color-accent-800:#5e2610;
  --color-divider:color-mix(in srgb,#201c17 20%,transparent);
  --edge:clamp(20px,5vw,72px);
}
.acc-ochre{--color-accent:#c1811f;--color-accent-100:#f8efda;--color-accent-200:#eeddb2;--color-accent-600:#a56c17;--color-accent-700:#845611;--color-accent-800:#63410c;}
.acc-green{--color-accent:#3f6b4f;--color-accent-100:#e6efe8;--color-accent-200:#c7dcce;--color-accent-600:#345a41;--color-accent-700:#274633;--color-accent-800:#1c3325;}
.img-colour .grayscale{filter:none;}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-wrap:pretty;}
img{display:block;max-width:100%;}
::selection{background:color-mix(in srgb,var(--color-accent) 28%,transparent);}
section{scroll-margin-top:78px;}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--edge);}
.seam{height:2px;border:0;margin:0;background:var(--color-divider);}
.kicker{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent-700);margin:0;}
.kicker::before{content:"";width:26px;height:2px;background:var(--color-accent);}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}
/* skip link */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--color-accent);color:#f8f2ea;padding:12px 20px;font-size:14px;text-decoration:none;}
.skip-link:focus{left:var(--edge);top:12px;}
/* nav */
.nav-bar{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--color-bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-divider);transition:box-shadow .3s ease;}
.nav-bar.scrolled{box-shadow:0 10px 30px rgba(32,28,23,.07);}
.nav-in{max-width:1280px;margin:0 auto;padding:15px var(--edge);display:flex;align-items:center;gap:36px;}
.brand{font-family:var(--font-heading);font-weight:800;font-size:23px;letter-spacing:-.035em;margin-right:auto;text-decoration:none;color:var(--color-text);display:inline-flex;align-items:baseline;}
.brand .dot{color:var(--color-accent);}
.brand img{max-height:32px;width:auto;}
.nav-links{display:flex;gap:30px;align-items:center;list-style:none;margin:0;padding:0;}
.nav-links li{display:flex;}
.nav-links a{color:var(--color-text);text-decoration:none;font-size:14.5px;position:relative;padding:5px 0;white-space:nowrap;}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--color-accent);transition:right .35s cubic-bezier(.2,.7,.2,1);}
.nav-links a:hover::after,.nav-links a:focus-visible::after{right:0;}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:40px;height:40px;border:1px solid var(--color-divider);background:transparent;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.nav-toggle span{width:18px;height:2px;background:var(--color-text);transition:transform .3s,opacity .3s;}
.nav-menu{display:none;}
.nav-menu-list{list-style:none;margin:0;padding:0;}
@media (max-width:900px){
  .nav-links,.nav-cta-desk{display:none;}
  .nav-toggle{display:flex;}
  .nav-menu{display:block;position:fixed;inset:0;top:0;z-index:55;background:var(--color-bg);padding:96px var(--edge) 48px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;list-style:none;margin:0;overflow-y:auto;}
  .nav-menu.open{opacity:1;transform:none;pointer-events:auto;}
  .nav-menu a{display:block;font-family:var(--font-heading);font-weight:800;font-size:34px;letter-spacing:-.02em;color:var(--color-text);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--color-divider);}
  .nav-menu a:hover{color:var(--color-accent);}
  .nav-menu .btn{margin-top:28px;font-size:16px;}
}
/* hero */
.hero{padding:clamp(44px,6vw,96px) 0 clamp(40px,5vw,72px);position:relative;}
.hero-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 60%,transparent);margin-bottom:clamp(28px,4vw,52px);flex-wrap:wrap;}
.hero-meta .num{color:var(--color-accent-700);font-weight:600;}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4vw,64px);align-items:end;}
.hero-display{font-family:var(--font-heading);font-weight:800;font-size:clamp(48px,8.6vw,124px);line-height:.94;letter-spacing:-.04em;margin:0;}
.hero-display .l{display:block;}
.hero-display .ac{color:var(--color-accent);}
.hero-sub{font-size:clamp(16px,1.25vw,18px);line-height:1.62;max-width:44ch;margin:clamp(26px,3vw,34px) 0 0;color:color-mix(in srgb,var(--color-text) 82%,transparent);}
.hero-sub p{margin:0 0 14px;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(26px,3vw,34px);}
.hero-fig{position:relative;margin:0;align-self:stretch;display:flex;flex-direction:column;}
.hero-fig .frame{position:relative;flex:1;}
.hero-fig .dc-image{width:100%;aspect-ratio:4/5;}
.hero-vlabel{position:absolute;right:-14px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 55%,transparent);}
.hero-cap{font-size:11.5px;line-height:1.5;color:color-mix(in srgb,var(--color-text) 55%,transparent);margin-top:10px;max-width:36ch;}
.btn{white-space:nowrap;}
.btn .ar{transition:transform .3s cubic-bezier(.2,.7,.2,1);display:inline-block;}
.btn:hover .ar{transform:translateX(4px);}
/* image placeholder (WP addition — the source design's <image-slot> tool
   handled its own empty-state visual; this is the plain-HTML equivalent) */
.dc-image{position:relative;overflow:hidden;background:var(--color-surface);}
.dc-image img{width:100%;height:100%;object-fit:cover;}
.dc-image--placeholder{display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--color-divider);}
.dc-image--placeholder .ph-cap{max-width:32ch;padding:20px;text-align:center;font-size:12.5px;line-height:1.5;color:color-mix(in srgb,var(--color-text) 55%,transparent);}
/* section shell */
.section{padding:clamp(56px,7vw,116px) 0;}
.sec-head{max-width:64ch;}
.sec-head h1,.sec-head h2{font-family:var(--font-heading);font-weight:800;font-size:clamp(30px,4.4vw,58px);line-height:1.02;letter-spacing:-.03em;margin:20px 0 0;}
.lead{font-size:clamp(16px,1.2vw,18px);line-height:1.66;color:color-mix(in srgb,var(--color-text) 82%,transparent);}
.lead p{margin:0 0 12px;}
.lead p:last-child{margin:0;}
/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,80px);margin-top:clamp(36px,4vw,56px);align-items:start;}
.about-fig{margin:0;}
.about-fig .dc-image{width:100%;aspect-ratio:5/6;}
.about-copy p{font-size:clamp(15.5px,1.15vw,17px);line-height:1.72;margin:0 0 18px;color:color-mix(in srgb,var(--color-text) 84%,transparent);}
.about-copy p:first-child{font-weight:600;color:var(--color-text);}
/* what we do */
.wd-rows{margin-top:clamp(40px,4vw,64px);border-top:2px solid var(--color-divider);}
.wd-row{display:grid;grid-template-columns:minmax(72px,120px) minmax(0,1fr);gap:clamp(20px,4vw,56px);padding:clamp(28px,3.5vw,48px) 0;border-bottom:2px solid var(--color-divider);transition:padding-left .35s ease;}
.wd-row:hover{padding-left:clamp(4px,1vw,16px);}
.wd-num{font-family:var(--font-heading);font-weight:800;font-size:clamp(30px,3.4vw,46px);line-height:1;color:var(--color-accent);letter-spacing:-.02em;}
.wd-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(14px,3vw,48px);align-items:baseline;}
.wd-title{font-family:var(--font-heading);font-weight:800;font-size:clamp(23px,2.4vw,32px);line-height:1.06;letter-spacing:-.02em;margin:0;}
.wd-copy{font-size:clamp(15px,1.1vw,16.5px);line-height:1.66;margin:0;color:color-mix(in srgb,var(--color-text) 80%,transparent);}
/* purpose */
.pu-rows{margin-top:clamp(40px,4vw,64px);border-top:1px solid var(--color-divider);}
.pu-row{display:grid;grid-template-columns:64px minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(16px,3vw,48px);align-items:baseline;padding:clamp(26px,3vw,40px) 0;border-bottom:1px solid var(--color-divider);position:relative;transition:color .3s ease;}
.pu-idx{font-size:13px;font-weight:600;color:color-mix(in srgb,var(--color-text) 45%,transparent);letter-spacing:.06em;padding-top:8px;}
.pu-word{font-family:var(--font-heading);font-weight:800;font-size:clamp(34px,4.6vw,64px);line-height:.98;letter-spacing:-.03em;margin:0;transition:transform .35s cubic-bezier(.2,.7,.2,1),color .3s ease;}
.pu-copy{font-size:clamp(15px,1.1vw,16.5px);line-height:1.68;margin:0;color:color-mix(in srgb,var(--color-text) 78%,transparent);align-self:center;}
.pu-row:hover .pu-word{color:var(--color-accent);transform:translateX(10px);}
.pu-row:hover .pu-idx{color:var(--color-accent-700);}
/* collaboration (dark) */
.collab{background:#201c17;color:#f4efe6;}
.collab .kicker{color:color-mix(in srgb,#f4efe6 78%,transparent);}
.collab .kicker::before{background:var(--color-accent);}
.collab-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;}
.collab h2{font-family:var(--font-heading);font-weight:800;font-size:clamp(30px,4.4vw,58px);line-height:1.02;letter-spacing:-.03em;margin:20px 0 0;}
.collab-lead{font-size:clamp(16px,1.2vw,18px);line-height:1.68;color:color-mix(in srgb,#f4efe6 82%,transparent);margin:0 0 26px;}
.collab-sub{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:color-mix(in srgb,#f4efe6 55%,transparent);margin:0 0 18px;}
.collab-tags{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0;}
.collab-tags .ct{display:inline-flex;align-items:center;font-size:14px;padding:9px 16px;border:1px solid color-mix(in srgb,#f4efe6 26%,transparent);color:#f4efe6;transition:background .25s ease,border-color .25s ease,color .25s ease;cursor:default;}
.collab-tags .ct:hover{background:var(--color-accent);border-color:var(--color-accent);color:#f8f2ea;}
.collab-cta{margin-top:clamp(40px,5vw,68px);border-top:1px solid color-mix(in srgb,#f4efe6 22%,transparent);padding-top:clamp(28px,3vw,40px);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.collab-cta p{font-family:var(--font-heading);font-weight:800;font-size:clamp(22px,2.6vw,34px);line-height:1.08;letter-spacing:-.02em;margin:0;max-width:20ch;}
.collab .btn-light{background:var(--color-accent);color:#f8f2ea;border-color:var(--color-accent);}
.collab .btn-light:hover{background:var(--color-accent-600);border-color:var(--color-accent-600);}
/* contact */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,80px);margin-top:clamp(40px,4vw,60px);align-items:start;}
.c-form{display:flex;flex-direction:column;gap:18px;}
.c-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.c-form .field>label{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 62%,transparent);}
.c-form .field>label .opt{text-transform:none;letter-spacing:0;color:color-mix(in srgb,var(--color-text) 40%,transparent);font-weight:400;}
.c-form .input{background:transparent;border:0;border-bottom:1.5px solid var(--color-divider);padding:10px 0;font-size:16px;border-radius:0;}
.c-form .input:hover{border-color:color-mix(in srgb,var(--color-text) 45%,transparent);}
.c-form .input:focus-visible{border-color:var(--color-accent);outline:none;}
.c-submit{margin-top:8px;align-self:flex-start;font-size:15px;padding:14px 24px;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.c-sent{border:1px solid var(--color-accent);padding:28px;background:var(--color-accent-100);}
.c-sent h3{font-family:var(--font-heading);font-weight:800;font-size:22px;margin:0 0 8px;color:#3f6b4f;}
.c-sent p{margin:0;font-size:15px;line-height:1.6;color:var(--color-text);}
/* footer */
.site-foot{border-top:2px solid var(--color-divider);}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);padding:clamp(48px,5vw,72px) 0 clamp(28px,3vw,40px);}
.foot-brand{font-family:var(--font-heading);font-weight:800;font-size:28px;letter-spacing:-.03em;margin:0 0 16px;}
.foot-brand .dot{color:var(--color-accent);}
.foot-blurb{font-size:15px;line-height:1.62;max-width:38ch;color:color-mix(in srgb,var(--color-text) 78%,transparent);margin:0 0 16px;}
.foot-loc{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-700);font-weight:600;}
.foot-links{display:flex;flex-direction:column;gap:12px;align-items:flex-start;list-style:none;margin:0;padding:0;}
.foot-links a{color:var(--color-text);text-decoration:none;font-size:15px;}
.foot-links a:hover{color:var(--color-accent);}
.foot-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 0 32px;border-top:1px solid var(--color-divider);font-size:12.5px;color:color-mix(in srgb,var(--color-text) 55%,transparent);}
.foot-bar .uka{letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent-700);font-weight:600;}
/* fallback templates (page.php / 404.php) — same section shell, no new design */
.page-fallback{padding-top:clamp(56px,7vw,116px);}
.error-404 .sec-head{max-width:56ch;}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:clamp(28px,6vw,44px);}
  .hero-fig{order:-1;}
  .hero-fig .dc-image{aspect-ratio:16/11;}
  .about-grid,.collab-grid,.foot-grid{grid-template-columns:1fr;}
  .about-fig{order:-1;}
  .about-fig .dc-image{aspect-ratio:16/10;}
  .wd-body{grid-template-columns:1fr;gap:12px;}
  .collab-cta{align-items:flex-start;}
}
@media (max-width:560px){
  .wd-row{grid-template-columns:1fr;gap:12px;}
  .pu-row{grid-template-columns:1fr;gap:10px;}
  .pu-idx{padding-top:0;}
  .c-two{grid-template-columns:1fr;}
  .hero-vlabel{display:none;}
}