/* Scoped website polish: approved requests only.
   Keeps original kinetic hero, project demos, real video and page routes.
   Do not treat archived Figma frames as implementation authority. */
:root{--finish-x:clamp(24px,4vw,56px);--finish-paper:#f2f0e9;--finish-ink:#101010;--finish-coral:#f05838;--finish-lime:#d9f64e;--finish-white:#fffefa}
html{scroll-padding-top:96px}
#about,#skills,#approach,#company,#message,#contact{scroll-margin-top:96px}
:is(.personal-section,.skills-section,.approach-section,.company-section,.message-section,.contact-section){box-sizing:border-box}
:is(.personal-section,.skills-section,.approach-section,.company-section,.message-section,.contact-section) :is(h2,h3,p,ul,li){min-width:0}
:is(.personal-section,.skills-section,.approach-section,.company-section,.message-section,.contact-section) :is(h2,h3){text-wrap:balance}

/* Personal section: actual introduction, not a floating monogram. */
.personal-section{background:var(--finish-paper);color:var(--finish-ink);min-height:0;padding:clamp(111px,9vw,152px) var(--finish-x) clamp(94px,8vw,128px)}
.personal-section .section-kicker{border-bottom:1px solid #bcb9b1;padding:0 0 17px;font-size:12px;letter-spacing:.1em;font-weight:800;color:var(--finish-ink)}
.personal-section .about-grid{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:clamp(30px,5vw,80px);align-items:end;margin-top:clamp(48px,5vw,72px)}
.personal-section .about-grid h2{font-family:var(--font);font-size:clamp(60px,7.25vw,110px);font-weight:950;line-height:1.01;letter-spacing:-.074em;margin:0;max-width:100%;overflow-wrap:normal}
.personal-section .about-grid h2 em{color:var(--finish-coral);font-style:normal}
.personal-section .about-copy{max-width:590px;padding-bottom:7px}
.personal-section .about-copy p{font-size:clamp(17px,1.6vw,24px);font-weight:400;line-height:1.5;letter-spacing:-.023em;max-width:47ch;margin:0 0 22px}
.personal-section .about-copy p:last-child{margin-bottom:0}

/* Skills: same two-column optical grid as Company, no disconnected microcopy. */
.skills-section{background:var(--finish-ink);color:var(--finish-white);padding:clamp(105px,8vw,130px) var(--finish-x) clamp(106px,9vw,140px);min-height:0}
.skills-section .section-mini-label{color:var(--finish-white);font-size:12px;letter-spacing:.09em;font-weight:800}
.skills-section .skills-grid{display:block;margin-top:clamp(48px,5vw,76px)}
.skills-section .skills-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:end}
.skills-section .skills-intro h2{font-family:var(--font);font-size:clamp(60px,6.8vw,103px);line-height:.96;letter-spacing:-.073em;margin:0;max-width:none;color:var(--finish-white)}
.skills-section .skills-intro h2 em{font-style:normal;color:var(--finish-lime)}
.skills-section .skills-intro p{max-width:36ch;margin:0 0 4px;font-size:clamp(17px,1.6vw,23px);line-height:1.5;font-weight:400;color:#e6e4dc;letter-spacing:-.02em}
.skills-section .skills-list{display:block;list-style:none;padding:0;margin:clamp(54px,5vw,76px) 0 0}
.skills-section .skills-list li{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:center;padding:12px 0;margin:0;min-height:64px;border:0}
.skills-section .skills-list li strong{display:block;color:var(--finish-white);font-family:var(--font);font-size:clamp(21px,2.1vw,31px);font-weight:900;line-height:1.15;letter-spacing:-.045em;margin:0;overflow-wrap:break-word}
.skills-section .skills-list li p{display:block;color:#d0cec7;font-size:clamp(15px,1.14vw,18px);font-weight:400;line-height:1.45;max-width:46ch;margin:0;letter-spacing:-.007em}

/* Existing Method stays four steps; spacing follows the same column rhythm. */
.approach-section{padding:clamp(102px,8vw,130px) var(--finish-x) clamp(96px,8vw,120px);background:var(--finish-paper);color:var(--finish-ink)}
.approach-section .approach-heading{margin:clamp(40px,5vw,68px) 0 clamp(52px,6vw,88px);font-size:clamp(61px,7vw,104px);line-height:1.01;letter-spacing:-.07em}
.approach-section .approach-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.approach-section .approach-step{min-width:0;border:0;padding:0}
.approach-section .approach-step h3{font-size:clamp(23px,2vw,31px);margin:0 0 13px}
.approach-section .approach-step p{font-size:clamp(15px,1.08vw,18px);line-height:1.5}

/* Company identity is one heading, not "LTD" on a separate huge row. */
.company-section{min-height:0;background:var(--finish-paper);color:var(--finish-ink);padding:clamp(112px,9vw,148px) var(--finish-x) clamp(90px,7vw,120px)}
.company-section .company-topline{font-size:12px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;margin:0 0 clamp(39px,4vw,59px)}
.company-section .company-heading{display:block;margin:0 0 clamp(55px,5vw,76px)}
.company-section .company-heading h2{font-family:var(--font);font-size:clamp(54px,6.75vw,105px);line-height:1.02;letter-spacing:-.075em;font-weight:950;margin:0;max-width:100%;white-space:nowrap;color:var(--finish-ink)}
.company-section .company-heading h2 .company-name-rest{color:var(--finish-ink);white-space:nowrap}
.company-section .company-heading h2 .company-name-rest em{color:var(--finish-coral);font-style:normal;margin-left:.12em}
.company-section .company-heading>p{font-size:clamp(17px,1.55vw,23px);line-height:1.45;letter-spacing:-.015em;max-width:57ch;margin:25px 0 0;color:var(--finish-ink)}
.company-section .company-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;border-top:1px solid #b7b4ab;padding:32px 0 0}
.company-section .company-label{display:block;font-size:11px;line-height:1.45;font-weight:800;letter-spacing:.085em}
.company-section .company-fact strong,.company-section .company-other-projects strong{display:block;font-size:clamp(24px,2.3vw,35px);font-weight:900;letter-spacing:-.054em;line-height:1.15;margin:12px 0 8px}
.company-section .company-fact p,.company-section .company-other p{font-size:clamp(15px,1.16vw,18px);line-height:1.49;color:#58564e;margin:0;max-width:46ch}
.company-section .company-other{display:block;border:0;border-top:1px solid #b7b4ab;background:transparent;padding:clamp(32px,3.3vw,48px) 0 0;margin:clamp(54px,5vw,74px) 0 0}
.company-section .company-other-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:13px 32px}
.company-section .company-other-heading p{margin:0;max-width:none}
.company-section .company-other-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:27px}
.company-section .company-other-projects strong{font-size:clamp(23px,2vw,31px);margin:0 0 8px}
.company-section .company-other-projects>div{min-width:0}

/* Contact form and closing: same reading rhythm, no fake sending claim. */
.message-section{background:var(--finish-paper);color:var(--finish-ink);padding:clamp(110px,9vw,145px) var(--finish-x) clamp(104px,8vw,130px)}
.message-section .section-mini-label{font-size:12px;font-weight:800}
.message-section .message-layout{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(32px,4.7vw,76px);align-items:start;margin-top:clamp(43px,4.4vw,68px)}
.message-section h2{font-size:clamp(57px,6.6vw,100px);line-height:1.01;letter-spacing:-.075em;max-width:none}
.message-section h2 em{color:var(--finish-coral)}
.message-section .message-explainer{font-size:clamp(18px,1.6vw,23px);max-width:37ch;line-height:1.48;margin:30px 0 0}
.message-section .message-privacy{font-size:14px;max-width:46ch;line-height:1.6;margin:22px 0 0;color:#646158}
.message-section .message-form{min-width:0;gap:19px}
.message-section .message-field{min-width:0}
.message-section .message-field :is(input,select,textarea){box-sizing:border-box;width:100%;max-width:100%;min-width:0}
.message-section .message-controls{display:flex;flex-wrap:wrap;align-items:center;gap:15px}
.message-section :is(button,input,textarea,select):focus-visible{outline:3px solid var(--finish-coral);outline-offset:3px}
.contact-section{min-height:0;background:var(--finish-ink);color:var(--finish-white);padding:clamp(119px,9vw,154px) var(--finish-x) 32px;display:block}
.contact-section .contact-overline{font-size:12px;letter-spacing:.09em;line-height:1.4;padding-bottom:18px;color:var(--finish-white)}
.contact-section h2{font-size:clamp(84px,13.2vw,188px);line-height:.91;letter-spacing:-.073em;margin:clamp(52px,6vw,89px) 0 clamp(55px,5.7vw,79px);max-width:100%}
.contact-section h2 em{color:var(--finish-lime)}
.contact-section .contact-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(28px,4vw,62px);margin:0 0 clamp(96px,9vw,130px)}
.contact-section .contact-bottom p{font-size:clamp(19px,2vw,28px);line-height:1.44;letter-spacing:-.023em;max-width:39ch;margin:0}
.contact-section .contact-cta{box-sizing:border-box;max-width:100%;min-width:0;min-height:62px;font-size:clamp(14px,1.2vw,18px);line-height:1.3;white-space:normal;text-align:left;display:inline-flex;align-items:center;justify-content:space-between;gap:25px;padding:17px 21px}
.contact-section .footerline{display:grid;grid-template-columns:1fr 1.3fr auto auto;gap:22px;align-items:center;margin:0;padding:23px 0 0}
.contact-section .footerline :is(span,a){min-width:0;max-width:100%;font-size:11px;line-height:1.45}
.contact-section .footerline a{text-underline-offset:4px}

/* Case-study entry points and project controls remain functional. */
.chapter .chapter-actions{gap:12px}
.chapter .chapter-actions .chapter-open{min-height:52px;max-width:100%;line-height:1.28;white-space:normal}
.chapter .chapter-actions .project-deep-link{line-height:1.35}
.chapter .chapter-main{min-width:0}
.chapter .chapter-main h3{max-width:100%}
.chapter-jewellery .trade-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;justify-content:stretch}
.chapter-jewellery .trade-steps button{width:100%;min-width:0}

/* Do not letterbox the centre of a portrait diamond video into an unreadable strip.
   Cropping the video is preferable to stretching its source pixels. */
.chapter-jewellery .jewel-showreel,
.case-body[data-theme="jewellery"] .jewel-showreel{object-fit:cover;object-position:center center}

@media(max-width:1050px){
 .personal-section .about-grid{grid-template-columns:1fr;align-items:start;gap:35px}
 .personal-section .about-copy{max-width:750px}
 .skills-section .skills-intro{grid-template-columns:1fr;gap:28px}
 .skills-section .skills-intro p{max-width:55ch}
 .company-section .company-heading h2{font-size:clamp(50px,6.9vw,75px)}
 .contact-section .contact-bottom{grid-template-columns:1fr;align-items:start}
 .contact-section .footerline{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
}
@media(max-width:850px){
 .company-section .company-heading h2{white-space:normal;font-size:clamp(48px,8.7vw,72px);line-height:1.02}
 .company-section .company-heading h2 .company-name-rest{display:block;white-space:nowrap}
 .skills-section .skills-list li{grid-template-columns:minmax(0,1fr);gap:7px;padding:14px 0}
 .skills-section .skills-list li strong{font-size:clamp(22px,3.5vw,29px)}
 .skills-section .skills-list li p{font-size:16px}
 .approach-section .approach-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 24px}
 .message-section .message-layout{grid-template-columns:minmax(0,1fr);gap:36px}
 .message-section .message-explainer{max-width:54ch}
}
@media(max-width:600px){
 :root{--finish-x:24px}
 html{scroll-padding-top:80px}
 #about,#skills,#approach,#company,#message,#contact{scroll-margin-top:80px}
 .personal-section{padding-block:106px 98px}
 .personal-section .about-grid{margin-top:43px;gap:28px}
 .personal-section .about-grid h2{font-size:clamp(49px,11.3vw,67px);line-height:1.05}
 .personal-section .about-copy p{font-size:18px;line-height:1.53}
 .skills-section{padding-block:109px 98px}
 .skills-section .skills-grid{margin-top:43px}
 .skills-section .skills-intro h2{font-size:clamp(57px,12.7vw,79px)}
 .skills-section .skills-intro p{font-size:18px}
 .skills-section .skills-list{margin-top:37px}
 .skills-section .skills-list li{padding:13px 0}
 .skills-section .skills-list li strong{font-size:23px}
 .skills-section .skills-list li p{font-size:15px}
 .approach-section{padding-block:106px 100px}
 .approach-section .approach-heading{font-size:clamp(53px,11.4vw,78px);margin:39px 0 58px}
 .approach-section .approach-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:33px 16px}
 .approach-section .approach-step h3{font-size:20px}
 .approach-section .approach-step p{font-size:15px}
 .company-section{padding-block:106px 94px}
 .company-section .company-topline{margin-bottom:39px}
 .company-section .company-heading{margin-bottom:49px}
 .company-section .company-heading h2{font-size:clamp(46px,11vw,60px);letter-spacing:-.072em}
 .company-section .company-heading>p{font-size:18px;margin-top:25px;line-height:1.5}
 .company-section .company-roles{grid-template-columns:minmax(0,1fr);gap:29px;padding-top:27px}
 .company-section .company-fact strong{font-size:29px;margin:8px 0}
 .company-section .company-other{margin-top:47px;padding-top:27px}
 .company-section .company-other-heading{display:block}
 .company-section .company-other-heading p{margin-top:9px}
 .company-section .company-other-projects{grid-template-columns:minmax(0,1fr);gap:30px;margin-top:30px}
 .company-section .company-other-projects strong{font-size:25px}
 .message-section{padding-block:108px 100px}
 .message-section h2{font-size:clamp(55px,12vw,77px)}
 .message-section .message-layout{margin-top:43px}
 .message-section .message-explainer{font-size:18px}
 .message-section .message-controls{align-items:stretch}
 .message-section .message-controls button{max-width:100%}
 .contact-section{padding:111px var(--finish-x) 27px}
 .contact-section h2{font-size:clamp(76px,18vw,110px);line-height:.96;margin:52px 0 58px}
 .contact-section .contact-bottom{gap:35px;margin-bottom:84px}
 .contact-section .contact-bottom p{font-size:19px;line-height:1.52}
 .contact-section .contact-cta{width:100%;font-size:16px}
 .contact-section .footerline{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:19px 13px}
 .contact-section .footerline :is(span,a){font-size:10px}
}
@media(max-width:360px){
 .personal-section .about-grid h2{font-size:47px}
 .skills-section .skills-intro h2{font-size:48px}
 .company-section .company-heading h2{font-size:45px}
 .approach-section .approach-steps{grid-template-columns:minmax(0,1fr)}
 .contact-section h2{font-size:74px}
}
@media(prefers-reduced-motion:reduce){
 .chapter-jewellery .jewel-video-surface{transform:none!important}
}